浅谈html table 标签

所属分类: 网页制作 / HTML/Xhtml 阅读数: 519
收藏 0 赞 0 分享
主要讨论它的结构和一些重要的属性。我将使用一种慢慢改善的方式介绍它。
1)基本的结构如下:<tr>表示表格中的一行,<td>表示一行中的一列。说一列,其实可以
把它想象成word中的单元格。<th>实际上也是单元格,只不过它用作表格标题。从语义上来
说:<td>标示表格中的数据单元,<th>表示表格中一列或者是一行的标题。

复制代码
代码如下:

<table>
<tr><th></th></tr>
<tr><td><td></tr>
</table>

2)一个标题,可能是行标题,也可能是列标题,如何区分?需要使用scope属性scope=row/col。


复制代码
代码如下:

<table>
<tr><th scope="col"></th></tr>
<tr><td><td></tr>
</table>

3)表格也有自己的标题<caption>

复制代码
代码如下:

<table>
<caption>表格标题</caption>
<tr><th scope="col"></th></tr>
<tr><td><td></tr>
</table>

4)给表格添加简介summary属性

复制代码
代码如下:

<table summary="这是一个表格的内容简介">
<caption>表格标题</caption>
<tr><th scope="col"></th></tr>
<tr><td><td></tr>
</table>

5)表格边框模型和单元格默认padding。
表格边框有两种显示方式:分离和合并。border-collapse: separate/collapse IE6默认的样式是
分离的,看起来像立体的。实际上,不过是每个单元格都有自己独立的边框。合并则是共享边框。
table { border-collapse: collapse; }
单元格之间默认是有空白的,可以用border-spacing控制它,因为IE6不支持,所以很少用到。IE6
使用cellspacing。

复制代码
代码如下:

<table summary="这是一个表格的内容简介" cellspacing="0">
<caption>表格标题</caption>
<tr><th scope="col"></th></tr>
<tr><td><td></tr>
</table>

6)添加一些行和列。并给每一个<th>添加一个id。

复制代码
代码如下:

<table summary="这是一个表格的内容简介" cellspacing="0">
<caption>表格标题</caption>
<tr>
<th scope="col" id="name">姓名</th>
<th scope="col" id="address">地址</th>
<th scope="col" id="databirthday">出生日期</th>
</tr>
<tr>
<td>ewee<td>
<td>hubei<td>
<td>19870102<td>
</tr>
<tr>
<td>rewe<td>
<td>wuhan<td>
<td>419880103<td>
</tr>
<tr>
<td>ertww<td>
<td>yichang<td>
<td>19870205<td>
</tr>
</table>

7)对表格进行逻辑划分 <thead><tbody><tfoot>,把表格分成多个逻辑区域后,可以用CSS更好
的控制表现。

复制代码
代码如下:

<table summary="这是一个表格的内容简介" cellspacing="0">
<caption>表格标题</caption>
<thead>
<tr>
<th scope="col" id="name">姓名</th>
<th scope="col" id="address">地址</th>
<th scope="col" id="databirthday">出生日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>ewee<td>
<td>hubei<td>
<td>19870102<td>
</tr>
<tr>
<td>rewe<td>
<td>wuhan<td>
<td>419880103<td>
</tr>
<tr>
<td>ertww<td>
<td>yichang<td>
<td>19870205<td>
</tr>
<tbody>
</table>

我的这篇随笔只简单讲一讲表格的结构,希望有用。
更多精彩内容其他人还在看

html中textarea的使用及常见问题及案例分析

textarea标签是我们经常使用的一个html标签,主要是在输入较长的文本时,可以实现换行等效果。下面引用一个他的基本使用: textarea 标签 -- 代表HTML表单多行输入域 textarea标签是成对出现的,以<textarea>开始,以</text... 查看详情
收藏 0 赞 0 分享

html与嵌入其中的flash均存在滚动条的情况分析及处理方法

我们在做开发时经常会遇到这种情况: a.swf被添加到网页中, a.swf和html页面同时存在滚动条, 项目经理提了一个BT的需求---处理a.swf鼠标滚动的时候html页面不执行滚动, 反之则执行html页面的滚动! 应该怎么做呢? 方法1: 1.鼠标移入a.swf滚动区域... 查看详情
收藏 0 赞 0 分享

关于IE标签LI文字换行问题

折腾好久了,搜了一下还真有牛人解决了这个问题。在使用UL和LI显示文字的时候,由于IE浏览器对LI的文字长度没有默认强制令起一行。导致如果文字超出UL设定的宽度再先有的位置上折行,造成显示问题。 解决方法: 复制代码代码如下: ul li{ white-space:nowrap;... 查看详情
收藏 0 赞 0 分享

Form表单中method=post/get两种数据传输的方式的区别

Form提供了两种数据传输的方式——get和post。虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的影响。虽然为了方便的得到变量值,Web容器已经屏蔽了二者的一些差异,但是了解二者的差异在以后的编程也会很有帮助的。 ... 查看详情
收藏 0 赞 0 分享

Table相关整理及Javascript操作table,tr,td

效果良好的表属性设置: 复制代码代码如下: <table cellSpacing="0" cellPadding="0" border='1' bordercolor="black" style='border-collapse:collapse;table-layout:... 查看详情
收藏 0 赞 0 分享

td 内容自动换行 table表格td设置宽度后文字太多自动换行

设置table 的 style="table-layout:fixed;" 然后设置td的 style="word-wrap:break-word;" 即可 但这种情况下表格宽度自由分配,所以如果不用设置table 的 style=&qu... 查看详情
收藏 0 赞 0 分享

html4和html5区别之如何在一个input上添加焦点实现代码

html4: 复制代码代码如下: <form> <p><label>Username:<input name=search type="text" id="search"></label></p> <s... 查看详情
收藏 0 赞 0 分享

纯css为select添加样式(无脚本)实现

改变select默认的样式,一般情路情况下通过ul,li来模拟来实现。 有很多Jquery插件就是通过这样的方式来改变select默认样式的。 根据程序哥哥那边的反映,此种方式在form提交后无法获取数据,后来经过实验,用了不同的JS/Jquery插件,都是同样的结果:无法获取数... 查看详情
收藏 0 赞 0 分享

iframe的src赋值问题(服务器端)

今天遇到这个问题,服务器端的iframe重新src重新赋值,给iframe加一个ID,再加上runat=server 1.通过JS 给 iframe 的src 赋值 2.如果需要在C# 后台,页面加载时就改变iframe的src 可以通过 如<iframe id="... 查看详情
收藏 0 赞 0 分享

iframe的src设置为about:blank之后细节探讨

设置 iframe 的 src 为 'about:blank' 之后,不置为“about:blank”,内存不会释放掉。还必须用 iframe.document.write(''); 这样才能将内容清空,但是这样处理之后任然会有500-1000K左右的内存... 查看详情
收藏 0 赞 0 分享
查看更多