HTML Table

HTML Table Example:

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

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:

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