上一节:
下一节:

  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属性唯一地定义一个表的样式
上一节:
下一节: