Tablas HTML

A table is actually many small cells, and these small cells are arranged in an orderly manner. They have many rows and columns. This layout composed of rows and columns is called a table, and tables are defined by the table tag.

HTML table example:

Online example

HTML table
This example demonstrates how to create a table in an HTML document.

<table　border="1"　width="300">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>

Tablas HTML

A table is defined by the <table> tag. Each table has several rows (defined by the <tr> tag), and each row is divided into several cells (defined by the <td> tag). The letter td refers to table data (table data), that is, the content of the data cell. Data cells can contain text, images, lists, paragraphs, forms, horizontal lines, tables, and so on.

Table example

<table　border="1">
　　　　<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>

Displayed in the browser as follows::

HTML table and border attribute

If the border attribute is not defined, the table will not display a border. Sometimes this is useful, but most of the time, we want to display the border.

Use the border attribute to display a table with a border:

<table　border="1">
　　　　<tr>
　　　　　　　　<td>row　1,　column　1</td>
　　　　　　　　<td>row　1,　column　2</td>
　　　　</tr>
</table>

HTML table header

The table header is defined using the <th> tag.

Most browsers will display the header in bold and centered text:

<table　border="1">
　　　　<tr>
　　　　　　　　<th>Header one</<th>
　　　　　　　　<th>Header two</<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>

Displayed in the browser as follows:

More examples

Table without a border
This example demonstrates a table without a border.

Table header (Heading) in the table
This example demonstrates how to display the table header.

Table with a title
This example demonstrates a table with a title (caption).

Table cells that span rows or columns
This example demonstrates how to define table cells that span rows or columns.

Tags within the table
This example demonstrates how to display elements within different elements.

Cell padding (Cell padding)
This example demonstrates how to use Cell padding to create a blank space between the cell content and its border.

Cell spacing (Cell spacing)
This example demonstrates how to use Cell spacing to increase the distance between cells.

HTML table tags