HTML Table


HTML Table Example:

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



Examples

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, which is the content of data cells. Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and so on.

Form example

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>   
             

It displays as follows in the browser::

It displays as follows in the browser


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:

Example

<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 and centered text:

Example

<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>

It displays as follows in the browser:

It displays as follows in the browser


Examples

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

A beautiful form example


HTML Table Tags

Label Description
<table> Define a table
<th> Define a header of table
<tr> Define a row(s) of table
<td> Define table cells
<caption> Define table title
<colgroup> Define a group of table columns
<col> Define attributes for table columns
<thead> Define a header of table
<tbody> Define a body of table
<tfoot> Define a footer of table