Html table标签使用

<table>标签是前端比较常规使用的元素标签，尤其数据的展示方面，如面向企业端的数据看板，面向C端的统计数据等等。本文将简单介绍下如何使用table标签来完成一个前端数据的基础展示功能。如下，通过一个表格的代码示例来了解下table的使用：

  <table border="1">
    <tr>
      <th> 属性</th>
      <th> 值集</th>
      <th> 描述</th>
    </tr>

    <tr>
      <td>align</td>
      <td>	
        left、
        center、
        right</td>

        <td> 规定表格相对周围元素的对齐方式。 </td>
    </tr>
  </table>

如上，表格绘制主要是由table、tr、th、td等属性组成的。其中table是规定表格绘制区域，tr元素控制数据行，th元素用于绘制表格头部，td元素用于绘制表格的数据单元。如上第一行就是通过tr包裹th绘制的表格头。

注意：html 4 table元素中的中align、bgcolor属性不支持， XHTML 1.0 Strict DTD中,table元素中的align、bgcolor不支持使用。

如下，介绍table中支持的属性值设置以及设置支持的数据值集：

这是HTML规范给定的table操作元素属性控制。考虑到其控制的功能单一，效果比较差，且保持格式控制的一致性，目前主要是以CSS控制table为主。

1、设置表格边框

默认表格没有边框，我们可以通过css来给表格设置一个边框：

table,th,td {
   border:solid 1px #add9c0;
}

并为其单元格设置一个上下3px，左右5px的内边距，代码如下：

th,td {
   padding: 3px 5px;
}

表格周围的边框和单元格之间的边框，可以通过设置border-collapse将其合并，默认为分离状态，如上图table外边框与单元格为分离一小段距离，如下：

//  border-collapse:separate(分离，默认值) | collapse (边框合并，如果相邻则共用一个边框)
table {
   border-collapse: collapse;
}

2、表格布局

table表格我们可以通过CSS属性table-layout来设置表格布局算法，使用格式如下：

table-layout:auto（默认值） | fixed ;

自动表格布局（auto）

当设置为auto布局算法时，表格的列宽由单元格的内容自适应设定。其特点如下：

• 算法有时会较慢，它需要在确定最终的布局之前访问表格中所有的内容。
• 自动表格布局时，设置单元格的宽度是没有效的。

固定表格布局（fixed）

当设置为fixed布局算法时，表格的列宽是由表格的宽度、列宽度、表格边框宽度、单元格的间距决定，与表格内容无关，这样可以使得表格可以快速布局。若未指定表格的单元格宽度，则会根据表格的总宽度均匀分配到单个单元格中。其特点如下：

• 布局算法较快，无需访问table元素重新绘制。
• 可以根据设定的单元格宽度控制各个列的大小分配。

建议使用fixed布局，避免对table元素的重复绘制。如下，为我们设置的布局方式：

table {
  width:200px;
  table-layout:fixed;
}