Latest web development tutorials

HTML table

HTML table instance:

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


Examples

Online examples

form
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

Form defined by <table> tag. Each table has a number of lines (defined by <tr> tag), each line is divided into a number of cells (defined by the <td> tag). Refers to the content of letters td table data (table data), that is, the data cell. Data cell can contain text, images, lists, paragraphs, forms, horizontal, tables and so on.

Table instance

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

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


HTML tables and border properties

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

Use the border property to display a table with borders:

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


HTML table header

Table header using the <th> tag is defined.

Most browsers will display the header text in bold centered:

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

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


Examples

More examples

No border table
This case did not demonstrate a table border.

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

Table with headings
This example demonstrates with a title (caption) of the form

Interbank across columns or table cell
This example demonstrates how to define cross or across columns of a table cell.

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

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

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


HTML table tags

标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚