HTML table
HTML table instance:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
Adam | Johnson | 67 |
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
<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:
<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:
<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 |
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> | 定义表格的页脚 |