web概述04（table的使用）

table

基本属性

    <table border="1" width="30%"><tr height="80px"><th width="200px">姓名</th><th>性别</th><th>婚否</th></tr><tr><td>王晓痛</td><td>男</td><td>已婚</td></tr><tr><td>蒙新凯</td><td>女</td><td>未婚</td></tr></table><hr/><h3>基本属性</h3><ul><li>width和height用于设置表格、行或者列的宽度和高度</li><li>bgcolor用于设置背景色，一般已不再建议使用</li><li>align用于设置对平对齐方式，table的align用于设置表格在浏览器中的显示位置;如果tr和td则设置的是单元格中的内容对齐方式</li><li>valign用于设置单元格中内容的垂直对齐方式，默认单元格的高度是由其中内容决定的</li><li><strong>注意：</strong>一般不建议使用table中的显示样式控制</li></ul><table bgcolor="red" align="center"><tr bgcolor="blue"><th width="200px">姓名</th><th>性别</th><th>婚否</th></tr><tr><td align="right">王晓痛</td><td>男</td><td>已婚</td></tr><tr align="right" height="100px"><td valign="top">蒙新凯</td><td valign="middle">女</td><td valign="bottom">未婚</td></tr></table><hr/><h3>跨行和跨列问题</h3><ul><li>colspan用于实现跨列,当某个格子跨N列时，其右边N-1个单元格会自动删除</li><li>rowspan用于实现跨行，当某个格子跨N行时，其下方N-1个单元格会自动删除</li></ul><table border="1" style="width: 300px;"><tr><th rowspan="4">基本情况</th><th>姓名</th><th>性别</th><th>婚否</th></tr><tr><td>王晓痛</td><td>男</td><td>已婚</td></tr><tr><td valign="top">蒙新凯</td><td valign="middle">女</td><td valign="bottom">未婚</td></tr><tr><td colspan="3">统计：共2人</td></tr></table>

表格的结构化

 <p>表格可以分为表头、表体和表尾，这样修改其中一部分时不会影响其它部分，从而方便对表格使用javascript进行操作</p><ul>一个完整的表通常可以分为4个部分：<li>caption用于定义表格的标题，一般出现在表格的顶部，居中显示</li><li>thread定义表格的表头部分，通常表现为表格的标题行<br/>thread限制和规范表格的表头部分，尤其是用于动态生成表头，位置是不固定的，使用这个元素可以限制显示位置</li><li>tbody定义表格的表体部分，一个表格可以有多个主体，可以按照行进行显示<br/>tboty主要是包含非表头和表尾的主体部分，有助于表格格式的清晰，更加有助于后续的css显示控制和javascript编码控制</li><li>tfoot用于定义表格的表尾部分，通常表现为总计行。限制在表格的底部</li></ul><table border="1"><caption>学生统计信息</caption><tfoot><tr><td colspan="3">总共3名学生</td></tr></tfoot><tbody><tr><td>dddd</td><td>1989-2-3</td><td>true</td></tr></tbody><thead><tr><th>学生姓名</th><th>入学时间</th><th>性别</th></tr></thead><tbody><tr><td>萌新开</td><td>1989-4-5</td><td>false</td></tr></tbody>

表格的分组

    <ul><li>colgroup标签用于将表格中的列进行分组，并可以为不同的组设置不同的显示样式</li><li>col标签不会产生表格列，只是用于为表格中的列设置指定的属性值，如果在table中使用col为表格指定属性，则col定义的表格列数应该和表格的实际列数一致</li></ul><table  border="1"><!--使用colgroup将table中的所有列分为2个大的分组，可以为不同的分组设置不同的显示样式。这里的table有3个列，使用colgroup将3列分为2个组，一个组有一个列，两外一个组包含2个列--><colgroup style="background-color: red;"></colgroup><colgroup style="background-color: green;"><!--如果两个列的定义相同，可以使用span=2标识连个列的定义一致--><col style="width: 100px;"></col><col></col></colgroup><thead><tr><th colspan="3">考试成绩</th></tr><tr><th>姓名</th><th>语文</th><th>数学</th></tr></thead><tfoot><tr><td>平均成绩</td><td>70</td><td>80</td></tr></tfoot><tbody><tr><td>萌新开</td><td>60</td><td>70</td></tr><tr><td>内蒙人</td><td>80</td><td>90</td></tr></tbody></table>

表格的推荐用法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.table1{width: 80%;border: 1px solid #000;border-collapse: collapse; table-layout: fixed;}.table1 td {border: 1px solid #555;}.col-4 {width: 33.33333%;}.col-2 {width: 16.6666%;}.bbb {background-color: aquamarine;}</style>
</head>
<body><h2>table的推荐用法</h2><p>表格一般用于显示数据以及数据之间的关系，具体的显示效果还是建议使用css进行格式控制</p><table class="table1"><caption>col标签的用法</caption><!--col标签，可以用于设置每一列的样式，在一个table中可以定义多次--><col class="col-2 bbb"></col><col class="col-4"></col><col class="col-2 bbb"></col><col class="col-4"></col><tr><th>aaaa</th><th>bbbbb</th><th>cccc</th><th>dddd</th></tr><tr><td>11111</td><td>222222</td><td>33333</td><td>44444</td></tr></table>
</body>
</html>

为什么不建议使用table进行布局

table比其它标签占用更多的字节数（造成下载时间延迟，占用更多的服务区流量资源）
table会阻塞浏览器渲染引擎的渲染顺序（会延迟页面的生成速度，导致用户等待时间变长）
在table中显示图片时需要将图片切分为多个图（增加设计的复杂度，增加页面的加载时间，增加http会话数）
table会影响它内部的某些布局生效，限制页面设计的自由性
一般推荐使用css进行页面布局的显示控制
table对于页面布局来说从语义上看不正确，table应该描述的应该是内容，不是显示
table一旦设计完毕，很难再通过css修改显示效果

web概述04（table的使用）相关推荐

WEBBASIC Unit01 Web概述、 HTML概述、文本处理、图像和超链接、表格、表单
转载:https://blog.csdn.net/qq_38131668/article/details/73505925 参考:https://www.cnblogs.com/xiaziteng/p ...
Web基础(域名、网页、HTML、Web概述)与HTTP协议
文章目录一.域名概述二.网页的概念 2.1 静态网页 2.2 动态网页三.HTML概述四.WEB概述 4.1 Web1.0与Web2.0的区别 4.1.1 Web1.0 4.1.2 Web2. ...
初学Java Web（1）——Web概述
已经很久没有更新博客了,过年忙着吃喝玩乐,就怠惰了一小下下?幸好这学期新开的课程都比较有趣--Java Web和Android.至少对于我自己来说,既充满挑战,又富有趣味. --[1.Web概述]-- ...
java web 许令波_Java Web——Web概述
已经很久没有更新博客了,过年忙着吃喝玩乐,就怠惰了一小下下?幸好这学期新开的课程都比较有趣--Java Web和Android.至少对于我自己来说,既充满挑战,又富有趣味. --[1.Web概述]-- ...
Java Web概述-练习题
~本特利~ Java Web概述练习题一.填空题 1.Tomcat的默认端口号是[ 8080 ]. 2.在HTTP协议中,一个完整的请求消息是由请求行.[ 请求头 ]和实体内容三部分组成. 3.HT ...
JavaWeb核心技术——Web概述
目录 1,Web概述 1.1 Web和JavaWeb的概念 1.2 JavaWeb技术栈 1.2.1 B/S架构 1.2.2 静态资源 1.2.3 动态资源 1.2.4 数据库 1.2.5 HTTP协 ...
【Web基础】Web概述
1, Web概述 1.1 Web和JavaWeb的概念 Web是全球广域网,也称为万维网(www),能够通过浏览器访问的网站. 在我们日常的生活中,经常会使用浏览器去访问百度.京东.传智官网等这些网站 ...
Internet起源与Web概述
Internet起源 Internet起源于20世纪60年代的美国,20世纪60年代末,美国国防部高级研究计划局建立第一个网际网ARPANET,这是一个军用实验网,主要的目的是寻求一种将不同类型的计算 ...
域名详解与web概述及HTTP协议概述
目录 1.域名概述 2.DNS解析 2.2 linux系统下常用的DNS解析 2.2.1 linux系统中DNS解析生效顺序 2.3 域名服务器(分布式,每台主机维护一个部分) 2.4 域名空间结构( ...

web概述04（table的使用）

table

基本属性

表格的结构化

表格的分组

表格的推荐用法

为什么不建议使用table进行布局

web概述04（table的使用）相关推荐

最新文章

热门文章