freeCodeCamp/guide/chinese/html/tables/index.md

---
title: Tables
localeTitle: 表格
---
### 定义HTML表格

用`<table>`定义HTML表格。

表格由行`<tr>`组成，行由单元格组成。单元格可以分为标题单元格`<th>`和数据单元格`<td>`。默认情况下，标题单元格为粗体且居中。

更复杂的HTML表格还可能包含`<caption>` ， `<col>` ， `<colgroup>` ， `<thead>` ， `<tfoot>`和`<tbody>`元素。

#### 给表格添加边框

表格的默认格式是没有边框的。

添加边框需要用到CSS的`border`属性：

```css
table, th, td {
    border: 1px solid black;
}
```

### 简单的表格示例

```html

<table style="width:100%"> 
  <tr> 
    <th>Firstname</th> 
    <th>Lastname</th> 
    <th>Age</th> 
  </tr> 
  <tr> 
    <td>Jill</td> 
    <td>Smith</td> 
    <td>50</td> 
  </tr> 
  <tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>94</td> 
  </tr> 
 </table> 
```

[DEMO](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table)

### 表示具有更多语义信息的示例

```html

<!DOCTYPE html> 
    <html> 
    <body> 
       <table> 
      <thead> 
        <tr> 
          <th>Item</th> 
          <th>Amount</th> 
        </tr> 
      </thead> 
      <tfoot> 
        <tr> 
          <td>Apple</td> 
          <td>10</td> 
        </tr> 
      </tfoot> 
      <tbody> 
        <tr> 
          <td>Peach</td> 
          <td>15</td> 
        </tr> 
        <tr> 
          <td>Watermelon</td> 
          <td>3</td> 
        </tr> 
      </tbody> 
    </table> 
    </body> 
   </html> 
```
结果
Item Amount

Apple 10

| 项目 | 数量 |
|----|----|
| 苹果 | 10 |
| 桃子 | 15 |
| 西瓜 | 3 |

#### 更多信息：

[关于HTML的MDN文章](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) [标签](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
-												feat: add portuguese chinese arabic to guide

											
										
										
											2018-10-12 16:35:31 -04:00
+								---
 								title: Tables
-												updated table.md (#23417)

* updated table.md

I have rephrased it based on the English version in the folder.

* change the table result

											
										
										
											2018-12-30 15:59:43 -05:00
+								localeTitle: 表格
-												feat: add portuguese chinese arabic to guide

											
										
										
											2018-10-12 16:35:31 -04:00
+								---
-												Update index.md (#28398)

Add some details about table, and the css property: border.
											
										
										
											2019-06-25 16:22:17 +08:00
+								### 定义HTML表格
-												feat: add portuguese chinese arabic to guide

											
										
										
											2018-10-12 16:35:31 -04:00
-												Update index.md (#28398)

Add some details about table, and the css property: border.
											
										
										
											2019-06-25 16:22:17 +08:00
+								用`<table>`定义HTML表格。
-												feat: add portuguese chinese arabic to guide

											
										
										
											2018-10-12 16:35:31 -04:00
-												Update index.md (#28398)

Add some details about table, and the css property: border.
											
										
										
											2019-06-25 16:22:17 +08:00
+								表格由行`<tr>`组成，行由单元格组成。单元格可以分为标题单元格`<th>`和数据单元格`<td>`。默认情况下，标题单元格为粗体且居中。
-												feat: add portuguese chinese arabic to guide

											
										
										
											2018-10-12 16:35:31 -04:00
-												Update index.md (#28398)

Add some details about table, and the css property: border.
											
										
										
											2019-06-25 16:22:17 +08:00
+								更复杂的HTML表格还可能包含`<caption>` ， `<col>` ， `<colgroup>` ， `<thead>` ， `<tfoot>`和`<tbody>`元素。
-												feat: add portuguese chinese arabic to guide

											
										
										
											2018-10-12 16:35:31 -04:00
-												Update index.md (#28398)

Add some details about table, and the css property: border.
											
										
										
											2019-06-25 16:22:17 +08:00
+								#### 给表格添加边框
-												feat: add portuguese chinese arabic to guide

											
										
										
											2018-10-12 16:35:31 -04:00
-												Update index.md (#28398)

Add some details about table, and the css property: border.
											
										
										
											2019-06-25 16:22:17 +08:00
+								表格的默认格式是没有边框的。
-												feat: add portuguese chinese arabic to guide

											
										
										
											2018-10-12 16:35:31 -04:00
-												Update index.md (#28398)

Add some details about table, and the css property: border.
											
										
										
											2019-06-25 16:22:17 +08:00
+								添加边框需要用到CSS的`border`属性：
-												feat: add portuguese chinese arabic to guide

											
										
										
											2018-10-12 16:35:31 -04:00
-												Update index.md (#28398)

Add some details about table, and the css property: border.
											
										
										
											2019-06-25 16:22:17 +08:00
+								```css
 								table, th, td {
 								    border: 1px solid black;
 								}
 								```
-												feat: add portuguese chinese arabic to guide

											
										
										
											2018-10-12 16:35:31 -04:00
 								### 简单的表格示例
 								```html
 								<table style="width:100%">
 								  <tr>
 								    <th>Firstname</th>
 								    <th>Lastname</th>
 								    <th>Age</th>
 								  </tr>
 								  <tr>
 								    <td>Jill</td>
 								    <td>Smith</td>
 								    <td>50</td>
 								  </tr>
 								  <tr>
 								    <td>Eve</td>
 								    <td>Jackson</td>
 								    <td>94</td>
 								  </tr>
 								 </table>
 								```
 								[DEMO](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table)
 								### 表示具有更多语义信息的示例
 								```html
 								<!DOCTYPE html>
 								    <html>
 								    <body>
 								       <table>
 								      <thead>
 								        <tr>
 								          <th>Item</th>
 								          <th>Amount</th>
 								        </tr>
 								      </thead>
 								      <tfoot>
 								        <tr>
 								          <td>Apple</td>
 								          <td>10</td>
 								        </tr>
 								      </tfoot>
 								      <tbody>
 								        <tr>
 								          <td>Peach</td>
 								          <td>15</td>
 								        </tr>
 								        <tr>
 								          <td>Watermelon</td>
 								          <td>3</td>
 								        </tr>
 								      </tbody>
 								    </table>
 								    </body>
 								   </html>
 								```
-												updated table.md (#23417)

* updated table.md

I have rephrased it based on the English version in the folder.

* change the table result

											
										
										
											2018-12-30 15:59:43 -05:00
+								结果
 								Item Amount
-												feat: add portuguese chinese arabic to guide

											
										
										
											2018-10-12 16:35:31 -04:00
-												updated table.md (#23417)

* updated table.md

I have rephrased it based on the English version in the folder.

* change the table result

											
										
										
											2018-12-30 15:59:43 -05:00
+								Apple 10
-												feat: add portuguese chinese arabic to guide

											
										
										
											2018-10-12 16:35:31 -04:00
-												Update index.md (#28398)

Add some details about table, and the css property: border.
											
										
										
											2019-06-25 16:22:17 +08:00
+								| 项目 | 数量 |
 								|----|----|
 								| 苹果 | 10 |
 								| 桃子 | 15 |
 								| 西瓜 | 3 |
-												feat: add portuguese chinese arabic to guide

											
										
										
											2018-10-12 16:35:31 -04:00
 								#### 更多信息：
-												change line 83 to 97 , arrange it to table (#31844)


											
										
										
											2018-12-08 15:51:26 +08:00
+								[关于HTML的MDN文章](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) [标签](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)