Class – 11 | HTML Tables | HTML Tutorial

HTML tables organize data in a tabular format, making it easier to read and understand. Tables can have multiple rows and columns; each cell 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> The aspect defines a table row; the <td> aspect represents a table cell. The <th> element represents a header cell, typically used to label the columns in the table.

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

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