HTML Table tags

5. HTML Table tags

To create a table in HTML, you can use the <table> element along with several other elements to structure and populate the table. Here’s a basic example of how to create a table:

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

In this example, we have a table with three columns defined by the <th> (table header) elements within the <tr> (table row) of the first row. The data rows are represented by the <tr> elements, and the individual cells are defined by the <td> (table data) elements.

You can add more rows and columns by adding additional <tr> elements and their corresponding <td> or <th> elements within the table.

CodePen example

5.1. Table tags

5.2. Grouping cells in tables using rowspan and colspan

In HTML, the rowspan attribute is used to span a cell across multiple rows, while the colspan attribute is used to span a cell across multiple columns. Example usage of rowspan:

<table>
  <tr>
    <td rowspan="2">Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
  </tr>
</table>

In this example, Cell 1 spans across two rows. Example usage of colspan:

<table>
  <tr>
    <td>Cell 1</td>
    <td colspan="2">Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
    <td>Cell 5</td>
  </tr>
</table>

In this example, Cell 2 spans across two columns. Using rowspan and colspan allows for flexible table layouts and the merging of cells to create complex table structures.

CodePen example

<table border="1">
  <caption>Tabla II: Agrupación de celdas en horizontal y verticcal</caption>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th> 
    <th>Encabezado 3</th>
    <th>Encabezado 4</th>
  </tr>
  <tr>
    <td rowspan="2">Campo 1</td>
    <td>Campo 2</td>
    <td>Campo 3</td>
    <td>Campo 4</td>
  </tr>
  <tr>
    <td colspan="2">Campo 6</td>
    <td>Campo 8</td>
  </tr>
  <tr>
    <td>Campo 10</td>
    <td>Campo 11</td>
    <td colspan="2" rowspan="2">Campo 12</td>
  </tr>
  <tr>
    <td>Campo 13</td>
    <td>Campo 14</td>
  </tr>
</table>

5.3. Table border, align, and bgcolor attributes

The following attributes can be applied to the <table> tag to control the appearance and layout of HTML tables. However, it is recommended to use CSS styles instead for better control and separation of concerns.

Do not use the following HTML properties, use CSS.

1. Border attribute: Specifies the width of the border around the table cells. The value is given in pixels. Example: <table border="1">
2. Align attribute: Determines the horizontal alignment of the table within its container. Possible values are «left,» «center,» or «right.» Example: <table align="center">
3. Bgcolor attribute: Sets the background color of the table. You can use color names or hexadecimal color codes. Example: <table bgcolor="#f1f1f1">

Exercise

Test