admin管理员组文章数量:1610632
我是标题
简单表格
表格的制作可以通过
row0.col1 | row0.col2 |
---|---|
row1.col1 | row1.col2 |
row2.col1 | row2.col2 |
可以得到这样的表格:
table
跨行/列表格制作
如果想制作复杂的跨行或列的表格就需要用到
的rowspan和colspan属性了。详细使用请参考W3School提供的示例。那么,如果我们要做一个这样的表格:
table
分析一下:
"购物车"是表格的标题,可以使用
标签;表格中有跨行跨列的单元格,可以使用colspan和rowspan属性;
另外,2016-11-22这一格中是加粗的,我们可以使用样式font-weight:bold;,当然也可以使用
标签完成;表格文字与边框之间的距离可以使用padding来完成。
我的代码是这样的:
购物车*{margin:0 auto;}
td, th{padding-left: 5px; padding-right: 5px; padding-top: 3px; padding-bottom: 3px;}
名称 | 2016-11-22 | 小计 | |
---|---|---|---|
重量 | 单价 |
... ...
详细代码请戳这里。
当然,在这里2016-11-22这一单元格使用的是
标签完成的,我们完全可以使用2016-11-22来实现。(我们也可以使用 标签实现。)可见,实现一个效果可以通过多种途径,但是建议使用CSS样式,这样可以将内容与表现分离,方便修改。
上边的代码稍稍改动一下:
... ...
*{margin:0 auto;}
.bold{font-weight: bold;}
... ...
... ...
在这里我们加了一个样式的定义,只需要在要加粗的标签上使用class="bold"即可进行加粗,而不必去替换标签或添加标签。具体CSS的使用这里就不进行叙述了。
通过这样的方式(代码在这里),我们很轻松就可以得到这样的效果:
table
版权声明:本文标题:html各类表格制作,HTML:复杂表格制作 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1728570667a1164131.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论