HTML Tables

Tables are defined with the <table> tag.

The <tr> element defines a table row 表格行, the <th> element defines a table header 表頭, and the <td> element are the data container of the table 單元格.

The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.

單元格可包含各種HTML元素：文本、圖檔、清單、其他表等。

The width of a table can be defined using CSS. 可以通過CSS設定表格寬度

The text in <th> elements are bold and centered by default. 預設：粗體 中間對齊

The text in <td> elements are regular and left-aligned by default. 預設：正常字型 左對齊

<table style="width:300px">
<tr>
  <th>Firstname</th>
  <th>Lastname</th> 
  <th>Points</th>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <td>94</td>
</tr>
</table>
           

Table with a Border Attribute

If you do not specify a border for the table, it will be displayed without borders.

如果不設定表格的border，則預設顯示的是無邊框表格，通過CSS設定border

<style>
table,th,td
{
border:1px solid black;
}
</style>
           

Table with Collapsed Borders

合并邊框模型，将邊框會合并為單一的邊框，相對于上面的例子。

<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse
}
</style>
           

Table with Cell Padding

Cell padding specifies the space between the cell content and its borders. 

單元格内邊距定義了單元格内容和邊框的空隙。如果不特别設定，則預設以無内邊距顯示。

通過CSS設定單元格内邊距：

th,td
{
padding:15px;
}
           

Table with Border Spacing

Use the CSS  border-spacing property to set the space between the cells.

設定單元格間距

table
{
border-spacing:5px;
}
           

Examples：

1. 豎直顯示表頭

<table>
<tr>
  <th>Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 855</td>
</tr>
</table>
           

2. 設定表格标題

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
           

3. 單元格 列擴充 colspan  ：specifies the number of columns a cell should span

<table>
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>
           

4. 單元格 行擴充 rowspan ：sets the number of rows a cell should span

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>