HTML 表格 - 蝴蝶教程

HTML表格

每个网站或许都需要一个表格来直观的展现数据，HTML用<table>元素来表示表格，每个表行都使用<tr>标记定义。使用<th>标记定义表头。默认情况下，表格标题为粗体并居中。使用<td>标签定义表数据/单元。

城市	国家	大洲
北京	中国	亚洲
上海	中国	亚洲
巴黎	法国	欧洲
伦敦	英国	欧洲
悉尼	澳大利亚	北美洲
柏林	德国	欧洲
布宜诺斯艾利斯	阿根廷	南美洲

<table>
      <tr>
        <th>城市</th>
        <th>国家</th>
        <th>大洲</th>
      </tr> 
      <tr>
        <td>北京</td>
        <td>中国</td>
        <td>亚洲</td>
      </tr>
      <tr>
        <td>上海</td>
        <td>中国</td>
        <td>亚洲</td>
      </tr>
      <tr>
        <td>巴黎</td>
        <td>法国</td>
        <td>欧洲</td>
      </tr>
      <tr>
        <td>伦敦</td>
        <td>英国</td>
        <td>欧洲</td>
      </tr>
      <tr>
        <td>悉尼</td>
        <td>澳大利亚</td>
        <td>北美洲</td>
      </tr>
      <tr>
        <td>柏林</td>
        <td>德国</td>
        <td>欧洲</td>
      </tr>
      <tr>
        <td>布宜诺斯艾利斯</td>
        <td>阿根廷</td>
        <td>南美洲</td>
      </tr>
  </table>

尝试一下

注：该<td>元素是表的数据容器。它们可以包含各种HTML元素; 文字，图像，清单，其他表格等

HTML表格 | 添加边框

如果未指定表格的边框，则将显示无边框。使用CSS border属性设置边框：

<style type="text/css">
          table, th, td {
              border: 1px solid black;
          }
        </style>
        <table>
            <tr>
              <th>城市</th>
              <th>国家</th>
              <th>大洲</th>
            </tr> 
            <tr>
              <td>北京</td>
              <td>中国</td>
              <td>亚洲</td>
            </tr>
            <tr>
              <td>巴黎</td>
              <td>法国</td>
              <td>欧洲</td>
            </tr>
        </table>

尝试一下

HTML表格 | 折叠边框

如果希望边框折叠为一个边框，请添加CSS border-collapse 属性：

<style type="text/css">
          table, th, td {
              border: 1px solid black;
              border-collapse: collapse;
          }
        </style>
        <table>
            <tr>
              <th>城市</th>
              <th>国家</th>
              <th>大洲</th>
            </tr> 
            <tr>
              <td>北京</td>
              <td>中国</td>
              <td>亚洲</td>
            </tr>
            <tr>
              <td>巴黎</td>
              <td>法国</td>
              <td>欧洲</td>
            </tr>
        </table>

尝试一下

HTML表格 | 添加单元格填充

单元格填充指定单元格内容与其边框之间的空间。如果未指定填充，则将显示表格单元格而不填充。要设置填充，请使用CSS padding属性：

<style type="text/css">
          th, td {
              padding: 15px;
          }
        </style>
        <table>
            <tr>
              <th>城市</th>
              <th>国家</th>
              <th>大洲</th>
            </tr> 
            <tr>
              <td>北京</td>
              <td>中国</td>
              <td>亚洲</td>
            </tr>
            <tr>
              <td>巴黎</td>
              <td>法国</td>
              <td>欧洲</td>
            </tr>
        </table>

尝试一下

HTML表格 | 左对齐

默认情况下，表格标题为粗体且居中。要左对齐表格标题，请使用CSS text-align属性：

<style type="text/css">
          th {
              text-align: left;
          }
        </style>
        <table>
            <tr>
              <th>城市</th>
              <th>国家</th>
              <th>大洲</th>
            </tr> 
            <tr>
              <td>北京</td>
              <td>中国</td>
              <td>亚洲</td>
            </tr>
            <tr>
              <td>巴黎</td>
              <td>法国</td>
              <td>欧洲</td>
            </tr>
        </table>

尝试一下

HTML表格 | 添加边框间距

边框间距指定单元格之间的间距。要设置表的边框间距，请使用CSS border-spacing属性：

<style type="text/css">
          table {
              border-spacing: 5px;
          }
        </style>
        <table>
            <tr>
              <th>城市</th>
              <th>国家</th>
              <th>大洲</th>
            </tr> 
            <tr>
              <td>北京</td>
              <td>中国</td>
              <td>亚洲</td>
            </tr>
            <tr>
              <td>巴黎</td>
              <td>法国</td>
              <td>欧洲</td>
            </tr>
        </table>

尝试一下

注意：如果表格有折叠边框，border-spacing则无效。

HTML表格 | 跨越多列的单元格

要使单元格跨越多个列，请使用以下colspan属性：

<table>
            <tr>
              <th>城市</th>
              <th colspan="2"> 国家</th>
            </tr> 
            <tr>
              <td>北京</td>
              <td>中国</td>
                                        <td>亚洲</td>
            </tr>
            <tr>
              <td>巴黎</td>
              <td>法国</td>
                                        <td>欧洲</td>
            </tr>
        </table>

尝试一下

HTML表格 | 跨越多行的单元格

要使单元格跨越多个行，请使用以下rowspan属性：

<table>
            <tr>
              <th>城市</th>
              <th> 国家</th>
            </tr> 
            <tr>
              <td>上海</td>
              <td rowspan="2">中国</td>
            </tr>
            <tr>
              <td>北京</td>
            </tr>
            <tr>
              <td>巴黎</td>
              <td>法国</td>
            </tr>
        </table>

尝试一下

HTML表格 | 添加标题

要为表格添加标题，请使用<caption>标记：

<table>
          <caption>世界名都</caption>
            <tr>
              <th>城市</th>
              <th> 国家</th>
            </tr> 
            <tr>
              <td>上海</td>
              <td>中国</td>
            </tr>
            <tr>
              <td>北京</td>
              <td>中国</td>
            </tr>
            <tr>
              <td>巴黎</td>
              <td>法国</td>
            </tr>
        </table>

尝试一下

注：<caption>标签必须紧跟在<table>标签后。

HTML表格 | 特别风格

要为特殊表定义特殊样式，请向表中添加id 属性：

         <style type="text/css">
            table#t1 {
                width: 100%; 
                background-color: #f1f1c1;
            }

            table#t1 tr:nth-child(even) {
                background-color: #eee;
            }
            table#t01 tr:nth-child(odd) {
                background-color: #fff;
            }
            table#t01 th {
                color: white;
                background-color: black;
            }
          </style>
          <table id="t1">
          <caption>世界名都</caption>
            <tr>
              <th>城市</th>
              <th> 国家</th>
            </tr> 
            <tr>
              <td>上海</td>
              <td>中国</td>
            </tr>
            <tr>
              <td>北京</td>
              <td>中国</td>
            </tr>
            <tr>
              <td>巴黎</td>
              <td>法国</td>
            </tr>
        </table>

尝试一下

章节总结

使用HTML <table>元素定义表
使用HTML <tr>元素定义表行
使用HTML <td>元素定义表数据
使用HTML <th>元素定义表标题
使用HTML <caption>元素定义表格标题
使用CSS border属性定义边框
使用CSS border-collapse属性折叠单元格边框
使用CSS padding属性向单元格添加填充
使用CSS text-align属性对齐单元格文本
使用CSS border-spacing属性设置单元格之间的间距
使用colspan属性可使单元格跨越多列
使用rowspan属性可使单元格跨越多行
使用id属性唯一地定义一个表的样式