HTML 表格基础

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
HTML 表格基础1，表格基本结构

<table>元素，表示表格数据，即通过二维数据表来表示的信息，类似Excel表格。

<table>元素，是一组标签的组合，包括： <table>、 <tr>、 <th>、 <td>等：

  • <table></table>：表格的开始标记和结束标记

  • <tr></tr>：定义表格中的行，一行内可以有一个或多个单元格（ <td> 或 <th> ）。

  • <th></th>：定义表格内的表头单元格，其内容默认在单元格内加粗并居中

  • <td></td>：定义表格内的数据单元格，其内容默认在单元格内靠左对齐，常规字体

下面是一个简单的表格代码：

  1. <table>
  2.     <tr>
  3.         <th>订单号</th>
  4.         <th>商品</th>
  5.         <th>价格</th>
  6.     </tr>
  7.     <tr>
  8.         <td>001</td>
  9.         <td>图书</td>
  10.         <td>45</td>
  11.     </tr>
  12.     <tr>
  13.         <td>002</td>
  14.         <td>办公用品</td>
  15.         <td>52</td>
  16.     </tr>
  17. </table>

页面显示效果如下：

2，border 属性

可以给<table>标签添加 border 属性，给表格加上边框，使其更美观易读：

  1. <table border="1">
  2.     ......
  3. </table>

加上边框后的页面显示效果如下：

注意：border 属性已经被新的标准弃用，应使用 CSS 样式来设置表格的边框。

3，合并单元格

可以通过 colspan、rowspan 属性来合并相邻的单元格，属性值就是要合并的单元格的数量。

  • colspan: 合并列，也就是横向合并
  • rowspan：合并行，也就是纵向合并

示例代码：

  1. <table border="1">
  2.     <tr>
  3.         <th>订单号</th>
  4.         <th>商品</th>
  5.         <th>价格</th>
  6.     </tr>
  7.     <tr>
  8.         <td rowspan="2">001</td>
  9.         <td>图书</td>
  10.         <td>45</td>
  11.     </tr>
  12.     <tr>
  13.         <!--<td></td>-->    <!--注意这里的单元格被合并了，所以要删除，否则这一行会多出一个单元格-->
  14.         <td>办公用品</td>
  15.         <td>52</td>
  16.     </tr>
  17.     <tr>
  18.         <td>002</td>
  19.         <td>咖啡</td>
  20.         <td>23</td>
  21.     </tr>
  22.     <tr>
  23.         <td colspan="2">总价</td>
  24.         <td>120</td>
  25.         <!--注意这一行原来是3个单元格，合并掉一个，所以只需2个-->
  26.     </tr>
  27. </table>

合并单元格后的页面显示效果如下：

4，语义化表格结构

可以给表格添加语义化标签，便于浏览器解析和脚本引用：

  • <caption></caption>：表格的标题，默认在表格上方，居中
  • <thead></thead>：表格的表头
  • <tbody></tbody>：表格的表体（主体内容数据部分）
  • <tfoot></tfoot>：表格的表尾

示例代码如下：

  1. <table border="1">
  2.     <caption>订单列表</caption>
  3.     <thead>
  4.         <tr>
  5.             <th>订单号</th>
  6.             <th>商品</th>
  7.             <th>价格</th>
  8.         </tr>
  9.     </thead>
  10.     <tbody>
  11.         <tr>
  12.             <td rowspan="2">001</td>
  13.             <td>图书</td>
  14.             <td>45</td>
  15.         </tr>
  16.         <tr>
  17.             <td>办公用品</td>
  18.             <td>52</td>
  19.         </tr>
  20.         <tr>
  21.             <td>002</td>
  22.             <td>咖啡</td>
  23.             <td>23</td>
  24.         </tr>
  25.     </tbody>
  26.     <tfoot>
  27.         <tr>
  28.             <td colspan="2">总价</td>
  29.             <td>120</td>
  30.         </tr>
  31.     </tfoot>
  32. </table>

加上添加语义化标签后的页面显示效果如下：

【本文由： 阜宁网页开发公司 http://www.1234xp.com/funing.html 欢迎留下您的宝贵建议】
更多阅读