HTML表格

表格是指遵从基本设置,基本格式如下:

<table>表格开头

     <tr>行

               <td></td>列

     </tr>

</table>

在实际使用中,因为各种各样的需求又在这个上边做了各种各样的修改。下边列举我在学习过程中看到的几种常见变形。

比如

第一种将中间的<td>替换为<th>,作为表格头,实现内容居中,加粗显示

HTML表格

第二种,使用HTML表单中的标题设置,使用caption命令,实现标题效果,居中显示

HTML表格

第三种,添加表单结构,使用thead,tbody,tfoot三个命令来存放表单的标题,主体,脚注

这种方式在添加后效果可能不是太明显,但是在表单数据量大、缓存数据多的时候可以更好地进行显示,实现效果的优化。

HTML表格HTML表格

第四种,跨列属性colspan实现多列合并,但是在实现之后记得将之下他合并列的<td>删掉

HTML表格

第五种,跨行属性rowspan实现多行合并,功能与colspan类似,也一定要删除之后的要合并的行<tr>哦

HTML表格

第六种,表格嵌套,需要放在td中,并且这个嵌套的表格要有完整的表格结构

HTML表格

第七种table布局——一种之前没有想过的布局方式

需要注意的是:1、尽量少的使用表格嵌套,容易使结构越拉越长,不利于维护

2、尽量少的使用跨行(rowsplan)和跨列(colspan)属性,因为需要删除对应数据,也不利于维护

3、一般不使用border。设置边框会使布局看起来很别扭。

4、表格宽度=单元格宽度的和

HTML表格

如下是我的做的一个table布局的例子

https://download.csdn.net/download/shenyou_fu/10561271

以下是table表格的可附加属性表,有需要自己直接用就可以了。

HTML表格HTML表格

行<tr>的一些常用属性

HTML表格