Home > Article > Web Front-end > Some records about table_html/css_WEB-ITnose
Some records about table_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:03:021196browse
HTML has 10 table-related tags
| 63bd76834ec05ac1f4c0ebbeaafb0994 | 表格的大标题，该标记可以出现在f5d188ed2c074f8b944552db028f98a1 之间的任意位置。它对于搜索引擎的机器人记录信息十分重要。参数有align、valign |
| 581cdb59a307ca5d1e365becba940e05 | 表格的列定义属性 |
| 879b49175114808d868f5fe5e24c4e0b | 定义表格列的分组，Firefox、Chrome 以及Safari 仅支持colgroup 元素的span 和width 属性 |
| f5d188ed2c074f8b944552db028f98a1 | 定义表格 |
| 92cee25da80fac49f6fb6eec5fd2c22a | 定义表格主体 |
| b6c5a531a458a2e790c1fd6421739d1c | 定义一个单元格 |
| 06669983c3badb677f993a8c29d18845 | 定义表格的表注(底部) |
| b4d429308760b6c2d20d6300079ed38e | 定义表格的表头，th元素内部的文本通常会呈现为粗体 |
| ae20bdd317918ca68efdc799512a9b39 | 定义表格的表头 |
| a34de1251f0d9fe1e645927f19a896e8 | 定义表格的行 |
<table border="1"> <caption>Table caption here</caption> <colgroup span="1" style="background:#DEDEDE;"/> <colgroup span="2" style="background:#EFEFEF;"/> <!-- Table Header--> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead> <!-- Table Footer--> <tfoot> <tr> <td>Foot 1</td> <td>Foot 2</td> <td>Foot 3</td> </tr> </tfoot> <!-- Table Body--> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> </tbody> </table>
1. ae20bdd317918ca68efdc799512a9b39 ,
ae20bdd317918ca68efdc799512a9b39 , 92cee25da80fac49f6fb6eec5fd2c22a , 06669983c3badb677f993a8c29d18845 tags. They represent the header, body and foot of the table respectively. When printing web content, if the table is too large to be printed on one page, ae20bdd317918ca68efdc799512a9b39 and 06669983c3badb677f993a8c29d18845 will appear on every page (note: invalid in IE, but valid in Firefox).
Features of tbody:
In order to allow a large table to be displayed in segments when downloaded, that is to say, when the browser parses HTML, the table is interpreted as a whole. Display can be optimized using tbody. If the table is very long, use tbody segmentation to display it part by part without waiting for the entire table to be downloaded. Download one piece and display one piece. It has better effect when the table is huge. The content of the rows contained in tbody will be displayed first after downloading, without waiting for the end of the table. In addition, there is one more thing that needs to be noted. Table rows are originally displayed from top to bottom. However, after applying thead/tbody/tfoot, it will be displayed "from head to toe", regardless of the order of your lines of code. That is to say, if thead is written after tbody, when the html is displayed, it will still be displayed first and then tbody.
三个注意点：
- There can only be one thead and tfoot in a table, but tbody can have multiple
- tfoot must appear in front of tbody, so that the browser The footer of the table can be rendered before receiving the main data, which helps speed up the display of the table. This is especially important for large tables
- The tr tag must be used in thead, tbody and tfoot
2. 63bd76834ec05ac1f4c0ebbeaafb0994
When setting the align attribute of the caption to left, each browser displays different styles
| firefox | chrome | IE6 7 8 | IE9 |
| safari | |||
3. 879b49175114808d868f5fe5e24c4e0b
When setting the align attribute of the caption to left, IE6 7 reflects this attribute, while other browsers are indifferent. The same goes for adding text-align to the tag style
| IE6 7 | IE8 9、firefox、safari、chrome |
可选的属性
| 属性 | 值 | 描述 |
| align | left center right | 不赞成使用。请使用样式代替。 规定表格相对周围元素的对齐方式。 |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | 不赞成使用。请使用样式代替。 规定表格的背景颜色。 |
| border | pixels | 规定表格边框的宽度 |
| cellpadding | pixels | 规定单元边沿与其内容之间的空白 |
| cellspacing | pixels | 规定单元格之间的空白 |
| frame | void | 规定外侧边框的哪个部分是可见的 |
| rules | none | 规定内侧边框的哪个部分是可见的 |
| width | % | 规定表格的宽度 |
| summary | text | 规定表格的摘要。用于概括整个表格的内容。它对于搜索引擎的机器人记录信息十分重要。摘要是不会显示出来的，给一些其它的工具使用的，比如盲人阅读器等。 |
| bordercolor |
rgb(x,x,x)
#xxxxxx
colorname
| 设置表格边框的颜色。但它在不同的浏览器下显示的效果不一致。（不推荐使用bordercolor 属性，而推荐使用CSS 样式表的border 属性来进行设置） |
一、cellspacing
cellspacing在大部分浏览器中与style中的border-spacing效果相同，但在IE6 7中略有不同
| IE6 7 cellspacing=0 | IE6 7 border-spacing=0 |
二、css中的border-collapse
css中的border-collapse:collapse | separate 可以设置表格的边框是否被合并成一个边框。将设置为border-collapse:collapse后，各个浏览器显示各不相同
| firefox | chrome | IE6 7 8 | IE9 |
| safari | |||
三、b4d429308760b6c2d20d6300079ed38e b6c5a531a458a2e790c1fd6421739d1c中的scope
scope属性定义将表头单元与数据单元相关联的方法；标识某个单元是否是列、行、列组或行组的表头；不会在普通浏览器中产生任何视觉变化；屏幕阅读器可以利用该属性。
使用 scope 属性，可以将数据单元格与表头单元格联系起来。通过属性值 row，表头行包括的所有表格都将和表头单元格联系起来。指定 col，会将当前列的所有单元格和表头单元格绑定起来。
<table border="1"> <tr> <th scope="col">Month</th> <th scope="col">Savings</th> </tr> <tr> <td scope="row">1</td> <td>January</td> <td>$100.00</td> </tr> <tr> <td scope="row">2</td> <td>February</td> <td>$10.00</td> </tr></table>
四、frame , rules
| 属性值 | 说明 |
| above | 显示上边框 |
| border | 显示上下左右边框 |
| below | 显示下边框 |
| hsides | 显示上下边框 |
| lhs | 显示左边框 |
| rhs | 显示右边框 |
| void | 不显示边框 |
| vsides | 显示左右边框 |
| 属性值 | 说明 |
| all | 显示所有内部边框 |
| groups | 显示介于行列边框 |
| none | 不显示内部边框 |
| cols | 仅显示列边框 |
| rows | 仅显示行边框 |
<table border="1" frame="hsides" rules="groups"> <caption>Table caption here</caption> <colgroup span="1" style="background:#DEDEDE;text-align:center"/> <colgroup span="2" style="background:#EFEFEF;"/> <!-- Table Header--> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead> <!-- Table Footer--> <tfoot> <tr> <td>Foot 1</td> <td>Foot 2</td> <td>Foot 3</td> </tr> </tfoot> <!-- Table Body--> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> </tbody> </table>
| firefox | chrome | IE6 7 | IE8 |
| IE9 | safari | ||
五、CSS中的table-layout
用来指定表格显示的样式
table { table-layout: fixed }
* auto（缺省）* fixed* inherit
auto表示单元格的大小由内容决定。fixed表示单元格的大小是固定的，由第一个指定大小的单元格决定；如果所有单元格都没有指定大小，则由第一个单元格的默认大小决定；如果单元格中的内容超出单元格的大小，则用CSS中的overflow命令控制。微软公司声称使用这个命令，表格的显示速度可以加快100倍。为了加快表格显示，最好事先就在CSS（或者table标签的width和height属性）中指定表格的宽度和高度。
六、跨行rowspan 跨列colspan
熟练掌握表格的colspan、 rowspan属性，可以随心所欲的制作出复杂的表格。
<table border="1"> <caption>Table caption here</caption> <colgroup span="1" style="background:#DEDEDE;text-align:center"/> <colgroup span="2" style="background:#EFEFEF;"/> <!-- Table Header--> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead> <!-- Table Footer--> <tfoot> <tr> <td>Foot 1</td> <td>Foot 2</td> <td>Foot 3</td> </tr> </tfoot> <!-- Table Body--> <tbody> <tr> <td rowspan="2">A</td> <td>B</td> <td>C</td> </tr> <tr> <td colspan="2">D</td> </tr> </tbody> </table>
经过CSS添加后的table
发挥你的想象力，玩转table
附加中保存的是示例的html代码
table.rar
也可以进入页面http://download.csdn.net/download/loneleaf1/7500555下载
参考资料：
http://blog.csdn.net/lujunql/article/details/5529989 table标签中thead、tbody、tfoot的作用
http://www.w3school.com.cn/tags/tag_table.asp HTML f5d188ed2c074f8b944552db028f98a1 标签
http://blog.csdn.net/nightelve/article/details/7957726 四个好看的CSS样式表格
http://www.divcss5.com/wenji/w503.shtml CSS如何设置html table表格边框样式
http://www.divcss5.com/html/h380.shtml HTML Table tr td th表格标签元素
http://www.divcss5.com/jiqiao/j470.shtml css table width表格宽度样式设置定义技巧教程篇
http://blog.csdn.net/neoxuhaotian/article/details/6596280 HTML学习笔记（三）
http://www.ruanyifeng.com/blog/2009/05/html_table_mastering.html 精通HTML表格的使用
http://www.douban.com/group/topic/10207896/ html常用标记详讲(二)--Table
http://www.787866.com/835.html html中10个与表格（table）相关标签
http://www.it118.org/specials/f27a38ab-a491-4669-bc47-108d9daed52c/fa512118-f79b-4693-958a-357e44086656.htm html中的表格(table)标签详解
http://www.cnblogs.com/xugang/archive/2010/08/11/1797305.html f5d188ed2c074f8b944552db028f98a1标签中比较少见的属性和子标签：
http://www.iteye.com/topic/560496 主题：十个最简单实用的Table设计模板