胖蔡说技术
随便扯扯

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中支持的属性值设置以及设置支持的数据值集:

属性名值集说明
alignleft | right | center规定表格的对齐方式
bgcolor颜色设置,支持常规设置颜色的设置格式,
如rgb、十六进制等
表格背景色
border像素大小,如:1px表格边框大小
cellpadding像素或者百分比单元格之间的空白
framevoid | above | below | hsides | lhs | rhs | vsides | box | border外侧边框哪部分可见
rulesnone | groups | rows | cols | all内侧边框哪部分可见
summary文本信息表格的描述文本
widthhtml长度数据,如:200px表格的宽度
table 属性设置
属性名值集说明
colspan整数数字表头单元格可横跨的列数
headersheader ID规定与表头单元格相关联的一个或多个表头单元格
rowspan整数数字表头单元格可纵跨的行数
scopecol | colgroup | row | rowgroup 表头单元格是否是行、列、行组或列组的头部
th 属性设置
属性名值集说明
colspan整数数字表头单元格可横跨的列数
rowspan整数数字表头单元格可纵跨的行数
headersheader ID规定与表头单元格相关联的一个或多个表头单元格
td 属性设置

这是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;
}

赞(1) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » Html table标签使用
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏