关于table的一些记录

2022-04-24 142

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： HTML有10个表格相关标签

HTML有10个表格相关标签

<caption>	表格的大标题，该标记可以出现在<table> 之间的任意位置。它对于搜索引擎的机器人记录信息十分重要。参数有align、valign
<col>	表格的列定义属性
<colgroup>	定义表格列的分组，Firefox、Chrome 以及Safari 仅支持colgroup 元素的span 和width 属性
<table>	定义表格
<tbody>	定义表格主体
<td>	定义一个单元格
<tfoot>	定义表格的表注(底部)
<th>	定义表格的表头，th元素内部的文本通常会呈现为粗体
<thead>	定义表格的表头
<tr>	定义表格的行

<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>

一、<thead> 、<tbody> 、<tfoot>

<thead> 、<tbody> 、<tfoot> 标记。它们分别表示表格的表头，表正文，表脚。在打印网页内容的时候，如果表格很大，一页打印不完，<thead>和<tfoot>将在每一页出现（注意：在IE 中无效，但在 Firefox 有效）。

tbody的特点：

为了让大表格(table)在下载的时候可以分段的显示，就是说在浏览器解析HTML时，table是作为一个整体解释的，使用tbody可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。tbody包含行的内容下载完优先显示，不必等待表格结束。另外，还需要注意一个地方。表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就“从头到脚”显示，不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面，html显示时，还是以先thead后tbody显示。

三个注意点：

thead和tfoot在一张表中都只能有一个，而tbody可以有多个

tfoot必须出现在tbody前面，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。这一点对大型表格尤其重要

thead、tbody和tfoot里面都必须使用tr标签

二、<caption>

在将caption的align属性设置为left的时候，各个浏览器表现出的样式各不相同

三、<colgroup>

在将caption的align属性设置为left的时候，IE6 7对这个属性有反映，其他浏览器都无动于衷。在标签style中添加text-align也是同样的情况

可选的属性

属性	值	描述
align	left center right	不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	不赞成使用。请使用样式代替。规定表格的背景颜色。
border	pixels	规定表格边框的宽度
cellpadding	pixels %	规定单元边沿与其内容之间的空白
cellspacing	pixels %	规定单元格之间的空白
frame	void above below hsides lhs rhs vsides box border	规定外侧边框的哪个部分是可见的
rules	none groups rows cols all	规定内侧边框的哪个部分是可见的
width	% pixels	规定表格的宽度
summary	text	规定表格的摘要。用于概括整个表格的内容。它对于搜索引擎的机器人记录信息十分重要。摘要是不会显示出来的，给一些其它的工具使用的，比如盲人阅读器等。
bordercolor	rgb(x,x,x) #xxxxxx colorname	设置表格边框的颜色。但它在不同的浏览器下显示的效果不一致。（不推荐使用bordercolor 属性，而推荐使用CSS 样式表的border 属性来进行设置）

1、cellspacing

cellspacing在大部分浏览器中与style中的border-spacing效果相同，但在IE6 7中略有不同

2、css中的border-collapse

css中的border-collapse:collapse | separate 可以设置表格的边框是否被合并成一个边框。将设置为border-collapse:collapse后，各个浏览器显示各不相同

3、<th> <td>中的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>

4、frame , rules

frame常见属性

属性值	说明
above	显示上边框
border	显示上下左右边框
below	显示下边框
hsides	显示上下边框
lhs	显示左边框
rhs	显示右边框
void	不显示边框
vsides	显示左右边框

rules常见属性

属性值	说明
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>

5、CSS中的table-layout

用来指定表格显示的样式

table { table-layout: fixed } 
* auto（缺省）
* fixed
* inherit

　　auto表示单元格的大小由内容决定。fixed表示单元格的大小是固定的，由第一个指定大小的单元格决定；如果所有单元格都没有指定大小，则由第一个单元格的默认大小决定；如果单元格中的内容超出单元格的大小，则用CSS中的overflow命令控制。微软公司声称使用这个命令，表格的显示速度可以加快100倍。为了加快表格显示，最好事先就在CSS（或者table标签的width和height属性）中指定表格的宽度和高度。

6、跨行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