网站建设工具哪个好,工作表现情况怎么写,免费创建一个网页,《营销型网站建设实战》用css样式#xff0c;为表格加入边框
Table 表格在没有添加 css 样式之前#xff0c;是没有边框的。这样不便于我们后期合并单元格知识点的讲解#xff0c;所以在这一节中我们为表格添加一些样式#xff0c;为它添加边框。
在右侧代码编辑器中添加如下代码#xff1a;
…用css样式为表格加入边框
Table 表格在没有添加 css 样式之前是没有边框的。这样不便于我们后期合并单元格知识点的讲解所以在这一节中我们为表格添加一些样式为它添加边框。
在右侧代码编辑器中添加如下代码
style typetext/css
table tr td,th{border:1px solid #000;}
/style
上述代码是用 css 样式代码后面章节会详细讲解为thtd单元格添加粗细为一个像素的黑色边框。
结果窗口显示出结果样式 !DOCTYPE HTML
html
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title为表格添加边框/title
style typetext/css
table tr td,th{border:1px solid #000;}
/style
/headbody
table summarytrth班级/thth学生数/thth平均成绩/th/trtrtd一班/tdtd30/tdtd89/td/trtrtd二班/tdtd35/tdtd85/td/trtrtd三班/tdtd32/tdtd80/td/tr
/table/body
/html
运行结果 caption标签为表格添加标题和摘要
表格还是需要添加一些标签进行优化可以添加标题和摘要。代码如下 摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)使搜索引擎更好的读懂表格内容还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。 语法table summary表格简介文本
标题
用以描述表格内容标题的显示位置表格上方。 语法
tablecaption标题文本/captiontrtd…/tdtd…/td…/tr
…
/table
!DOCTYPE HTML
html
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title认识table表标签/title
style typetext/css
table tr td,th{border:1px solid #000;
}
/style
/head
body
table summary本表格记录2012年到2013年库存记录记录包括U盘和耳机库存量caption 2012年到2013年库存记录/captiontrth产品名称 /thth品牌 /thth库存量个 /thth入库时间 /th/trtrtd耳机 /tdtd联想 /tdtd500/tdtd2013-1-2/td/trtrtdU盘 /tdtd金士顿 /tdtd120/tdtd2013-8-10/td/trtrtdU盘 /tdtd爱国者 /tdtd133/tdtd2013-3-25/td/tr
/table
/body
/html
运行结果
