Class – 11 | HTML Tables | HTML Tutorial

HTML tables are used to organize data in a tabular format, making it easier to read and understand. Tables can have multiple rows and columns, and each cell within the table can contain text or other HTML elements.

Here’s an example of a basic HTML table:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

The <table> element is used to create the table. The <tr> element defines a table row, and the <td> element defines a table cell within that row. The <th> element defines a header cell, which is typically used to label the columns in the table.

It is also possible to add styles to the table using CSS, such as changing the background color, border, font, and other properties.

Here’s an example of a table with styles:

<table style="width:100%">
  <tr>
    <th style="background-color:lightblue;">Header 1</th>
    <th style="background-color:lightblue;">Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

In this example, the style attribute is used to define inline styles for the table and header cells. The width property is used to set the width of the table, while the background-color property is used to set the background color.

Tables are a powerful tool for organizing data in HTML, and with a little bit of CSS, you can make your tables look great too!

Next Class