HTML5 – Tables

Tables are used to display data in a grid format, with rows and columns. In HTML5, tables are created using the <table> element.

Here is an example of a basic table in HTML5:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>alice@example.com</td>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>bob@example.com</td>
    <td>555-5678</td>
  </tr>
</table>

The <tr> element represents a row in the table, and the <td> element represents a cell in the row. The <th> element is similar to <td>, but is used to represent a header cell that is displayed in bold and centered.

You can add additional rows and cells to the table as needed. You can also use the colspan and rowspan attributes to merge cells horizontally or vertically.

Here is an example of a table with merged cells:

<table>
  <tr>
    <th colspan="2">Contact Information</th>
  </tr>
  <tr>
    <td>Name</td>
    <td>Alice</td>
  </tr>
  <tr>
    <td>Email</td>
    <td>alice@example.com</td>
  </tr>
  <tr>
    <td>Phone</td>
    <td>555-1234</td>
  </tr>
</table>

You can style tables using CSS, such as by changing the font, color, border, or alignment. You can also apply CSS classes or IDs to tables to give them specific styles.