HTML Table

HTML table example:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
John Doe 80
Adam Johnson 67

Online examples

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

(You can find more examples at the bottom of this page.)

HTML table

The 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, that is, the content of data cells. Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, etc.

Example

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

The browser displays as follows:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

HTML table and border attributes

If you do not define the border attribute, the table will not display the border. Sometimes this is useful, but most of the time, we want to show the border.

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

<table border = " 1 "> 
  <tr> 
    <td> Row 1, cell 1 </td> 
    <td> Row 1, cell 2 </td> 
  </tr> 
</table>

HTML table header

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

Most browsers will display the header as bold centered text:

<table border = " 1 "> 
  <tr> 
    <th> Header 1 </th> 
    <th> Header 2 </th> 
  </tr> 
  <tr> 
    <td> row 1, cell 1 </td> 
    <td> row 1, cell 2 </td> 
  </tr> 
  <tr> 
    <td> row 2, cell 1 </td> 
    <td> row 2, cell 2 </td> 
  </tr> 
</table>

The browser displays as follows:

Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

More examples

Table without borders
This example demonstrates a table without borders.

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

Table with caption
This example demonstrates a table with caption

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

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

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

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

Beautiful form

HTML table tags

Label Description
<table>
Define the table
<th>
Define the header of the table
<tr>
Define the rows of the table
<td>
Define table cells
<caption>
Define table title
<colgroup>
Define the group of table columns
<col>
Define attributes for table columns
<thead>
Define the header of the table
<tbody>
Define the body of the table
<tfoot>
Define the footer of the table