html:(15):用css样式给表格添加边框和caption标签

用css样式，为表格加入边框

Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。

在右侧代码编辑器中添加如下代码：

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>

上述代码是用 css 样式代码（后面章节会详细讲解），为th，td单元格添加粗细为一个像素的黑色边框。

结果窗口显示出结果样式：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>为表格添加边框</title>
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
</head><body>
<table summary=""><tr><th>班级</th><th>学生数</th><th>平均成绩</th></tr><tr><td>一班</td><td>30</td><td>89</td></tr><tr><td>二班</td><td>35</td><td>85</td></tr><tr><td>三班</td><td>32</td><td>80</td></tr>
</table></body>
</html>

运行结果

caption标签，为表格添加标题和摘要

表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下：

摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法：<table summary="表格简介文本">

标题

用以描述表格内容，标题的显示位置：表格上方。

语法：

<table><caption>标题文本</caption><tr><td>…</td><td>…</td>…</tr>
…
</table>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
<style type="text/css">
table tr td,th{border:1px solid #000;
}
</style>
</head>
<body>
<table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量"><caption> 2012年到2013年库存记录</caption><tr><th>产品名称 </th><th>品牌 </th><th>库存量（个） </th><th>入库时间 </th></tr><tr><td>耳机 </td><td>联想 </td><td>500</td><td>2013-1-2</td></tr><tr><td>U盘 </td><td>金士顿 </td><td>120</td><td>2013-8-10</td></tr><tr><td>U盘 </td><td>爱国者 </td><td>133</td><td>2013-3-25</td></tr>
</table>
</body>
</html>

运行结果

html:(15):用css样式给表格添加边框和caption标签相关推荐

Bootstrap全局CSS样式之表格
.table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...
css变成块级元素_设置标签的css样式代码为“display：block”，标签将变为块级元素。（）...
设置标签的css样式代码为"display:block",标签将变为块级元素.( ) 答:对青藏高原常见垫状植物有( ? ? ). 答:垫状点地梅甘肃蚤缀.垫状棘豆垫状驼绒藜 ...
web前端学习（八）——HTML5中表格、边框的相关标签设置
1.HTML中表格边框的相关标签 ①表格由 <table> 标签来定义. ②每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签 ...
Bootstrap全局css样式_表格
条纹状表格通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式.<!DOCTYPE html> <html lang=" ...
使用CSS样式对表格进行美化并对伪类的使用进行解析
 <html> <head> <tit ...
html中表格边框好看的样式,table完美css样式 table表格边框样式
蕃薯耀2016年6月15日星期三一.的css样式边框线不会重复叠加,不会有些粗有些细,全部统一. /**/ -{ /*-moz--; --border-radius:5px; border-rad ...
表格应用css样式,对表格与表单应用CSS样式.ppt
<对表格与表单应用CSS样式.ppt>由会员分享,可在线阅读,更多相关<对表格与表单应用CSS样式.ppt(12页珍藏版)>请在人人文库网上搜索. 1.第十章,HTML与CSS ...
前端css样式如何设置内边框
背景:我在写鼠标悬停样式 .topbox .menuBox > ul > li:hover { border-bottom: 4px solid #3C7CFC; font-weight: ...
discuz手机版帖子页面支持表格添加边框及边框颜色
discuz帖子支持插入表格,如下图,电脑版也能正常显示表格: 然而,在电脑版看着正常的表格到了手机页面就不再显示边框线,这样的体验很不好!如下图: 这和任何手机模板都没有关系,是因为discuz的系 ...

html:(15):用css样式给表格添加边框和caption标签

用css样式，为表格加入边框

caption标签，为表格添加标题和摘要

html:(15):用css样式给表格添加边框和caption标签相关推荐

最新文章

热门文章