表格在数据展示方面非常简单, 并且表现优秀, 通过与 CSS 的结合, 可以让数据变得更加美观和整齐.
行, 列, 单元格单元格特点: 同行等高, 同列等宽.
表格的基本语法:
创建一个 3 行 3 列的表格:
单元格中内容的填充间距通过 cellpadding(默认 1px) 属性来设置;
单元格与单元格之间的间距通过 cellspacing(默认 1px) 属性来设置.
设置单元格的填充间距为 10, 单元格之间的间距为 0, 红色边框
一般表格的第一行是标题, 并且是文本居中, 加粗, 将 td 换成 th.
而某些数据需要居中, 但不希望加粗, 可以给 td 添加 align="center"
表格的跨行跨列
有时, 表格的结构并没有那么简单, 可能会存在跨行和跨列的情况:
跨行:
跨列:
跨行, 跨列并存:
这个问题看似很复杂, 其实很简单, 在制作跨行和跨列的表格时, 只需按照如下步骤就可以轻松搞定!:
首先做一个完整的表格: 注意虚线部分, 最终去掉这些虚线就是我们要的效果
找出最左上角那个 "侵占" 其他单元格的单元格, 如下图标注数字的位置
观察这个单元格 "侵占" 的是行还是列, 算上自己总共是几个?(行数用 r 表示, 列数用 c 表示):
如果是行: 在这个单元格上添加 rowspan="r"
如果是列: 在这个单元格上添加 colspan="c"
如果既有行又有列: 在这个单元格上添加 rowspan="r" colspan="c"
把 "被侵占" 的单元格删掉, 删除顺序: 从右向左, 从上至下, 否则很容易出错!
按以上步骤完成一个跨行跨列的表格:
每天持续更新, 点点关注不迷路哦~
来源: http://www.jianshu.com/p/1ccee7ea0298