HTML教程
HTML教程
    • 请登录查看
    阅读(4204)

    HTML 表格

    最后一次修改 2017年08月01日

    HTML 表格

    HTML 表格实例:

    First NameLast NamePoints
    JillSmith50
    EveJackson94
    JohnDoe80
    AdamJohnson67



    在线实例

    实例

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html教程</title> 
</head>
<body>

<p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
</p>

<h4>一列:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    这个例子演示如何在 HTML 文档中创建表格。

    （可以在本页底端找到更多实例。）

    HTML 表格

    表格由<table>标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    表格实例

    <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>

    在浏览器显示如下：:

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


    HTML 表格和边框属性

    如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

    使用边框属性来显示一个带有边框的表格：

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


    HTML 表格表头

    表格的表头使用  标签进行定义。

    大多数浏览器会把表头显示为粗体居中的文本：

    <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>

    在浏览器显示如下：

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



    更多实例

    实例

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html教程</title> 
</head>
<body>

<h4>这个表格没有边框:</h4>
<table="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>这个表格没有边框:</h4>
<table border="0">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    本例演示一个没有边框的表格。

    实例

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html教程</title> 
</head>
<body>

<h4>水平标题:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th>Telephone</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直标题:</h4>
<table border="1">
<tr>
  <th>First 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>

</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    本例演示如何显示表格表头。

    实例

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html教程</title> 
</head>
<body>

<table border="1">
  <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>

</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    本例演示一个带标题 (caption) 的表格

    实例

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html教程</title> 
</head>
<body>

<h4>单元格跨两格:</h4>
<table border="1">
<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>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>First 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>

</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    本例演示如何定义跨行或跨列的表格单元格。

    实例

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html教程</title> 
</head>
<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    本例演示如何显示在不同的元素内显示元素。

    实例

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html教程</title> 
</head>
<body>

<h4>没有单元格边距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>有单元格边距:</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

    实例

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html教程</title> 
</head>
<body>

<h4>没有单元格间距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    本例演示如何使用 Cell spacing 增加单元格之间的距离。

    HTML 表格标签

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