HTML Table
HTML Table Example:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
Adam | Johnson | 67 |
Online Examples
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
This example demonstrates a table without borders.
This example demonstrates how to display the table header.
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.
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.
This example demonstrates how to use Cell spacing to increase the distance between cells.
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 |