HTML:复杂表格制作

HTML:复杂表格制作_第1张图片
我是标题

简单表格

表格的制作可以通过

来实现。(我们也可以使用标签实现。)

可见,实现一个效果可以通过多种途径,但是建议使用CSS样式,这样可以将内容与表现分离,方便修改。

上边的代码稍稍改动一下:

... ...
    
... ...

在这里我们加了一个样式的定义,只需要在要加粗的标签上使用class="bold"即可进行加粗,而不必去替换标签或添加标签。具体CSS的使用这里就不进行叙述了。

通过这样的方式(代码在这里),我们很轻松就可以得到这样的效果:

HTML:复杂表格制作_第4张图片
table

你可能感兴趣的:(HTML:复杂表格制作)

等标签的组合来构造。这样一段HTML:

    
row0.col1 row0.col2
row1.col1 row1.col2
row2.col1 row2.col2

可以得到这样的表格:

HTML:复杂表格制作_第2张图片
table

跨行/列表格制作

如果想制作复杂的跨行或列的表格就需要用到

rowspancolspan属性了。详细使用请参考W3School提供的示例。

那么,如果我们要做一个这样的表格:

HTML:复杂表格制作_第3张图片
table

分析一下:
"购物车"是表格的标题,可以使用

标签;
表格中有跨行跨列的单元格,可以使用colspanrowspan属性;
另外,2016-11-22这一格中是加粗的,我们可以使用样式font-weight:bold;,当然也可以使用
标签完成;
表格文字与边框之间的距离可以使用padding来完成。

我的代码是这样的:




    
    购物车
    



    
 ... ...
        
购物车
名称 2016-11-22 小计
重量 单价

详细代码请戳这里。

当然,在这里2016-11-22这一单元格使用的是

标签完成的,我们完全可以使用2016-11-22