HTML Tables
HTML Tables (HTML表格)
In HTML, you can create tables for your website using the <table> tag in conjunction with the <tr>, <td> and <th> tags.
The HTML tables allow displaying the data (e.g. image, text, link) in columns and rows of cells. Table rows can be grouped into a head, foot, and body sections through the <thead>, <tfoot> and <tbody> elements, respectively.
In HTML5, we can place <tfoot> either before or after <tbody> tag. They must come after any <caption>, <colgroup>, and <thead> elements.
Most of the attributes of the <table> element are not used in HTML5. If you want to style the appearance of the table, you can use CSS instead.
Spanning Multiple Rows and Columns
Spanning Multiple Rows and Columns (跨越多行和多列)
It is possible to extend rows and columns of a table across many other rows and columns. (可以将表的行和列扩展到许多其他行和列。)
Commonly, a table cell cannot pass into the space, which is below or above another cell. But, if you want to span several rows or columns in a table, you can use the colspan or rowspan attributes. (通常,表格单元格不能进入位于另一个单元格下方或上方的空间。但是,如果要跨越表中的多个行或列,可以使用colspan或rowspan属性。)
Adding Captions to Tables
Adding Captions to Tables (将标题添加到表格)
You can use the <caption> element to specify a caption for tables. It should be placed immediately after the opening <table> tag. By default, the caption will be at the top of the table, but its position can be changed with the CSS caption-side property.
Syntax
Syntax (语法)
The <table> tag comes in pairs. The content is written between the opening <table> and the closing </table> tags.
Example of the HTML <table> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>
Result
Month | Date |
---|
In the given example, we use the <table> tag to create a table. Then, we use the <tr> tag to divide the table into rows. The <th> tag is used for the table header cells, where the title is written. In other words, the table row is divided into headings. The <td> tag is used for table cells where the information is written.
If you want to show the heading in one cell, you can use the colspan attribute. (如果要在一个单元格中显示标题,可以使用colspan属性。)
Example of the HTML <table> tag with the colspan attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>
Result
Month and Date |
---|
The same can be done with the rows, but using the rowspan attribute. (对于行,也可以执行相同的操作,但使用rowspan属性。)
Example of the HTML <table> tag with the rowspan attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>January</td>
<td rowspan="2">10.01.2014</td>
</tr>
<tr>
<td>February</td>
</tr>
</table>
</body>
</html>
Result
Month | Date |
---|