Html的表格知多少

前端07班 王


对于table的使用我们会有种先入为主的厌恶。觉得页面中不应该出现表格!其实这只是针对使用HTML表格 来定义网页的布局,表格在方便的排列数据信息行和列方面还是非常完美。
下面我们就一起来学习一下table吧:
对于表格,我们现在已经不推荐使用它的一些自带属性,因为现在我们都在强调要保证结构与样式的分离,所以将想要定义的样式都放到css文件中吧。
table的10个相关标签<table> 定义表格<caption> 定义表格标题<col> 为表格的列定义属性<colgroup> 定义表格列的分组<thead> 定义表格的表头<th>定义表格的表头<tr> 定义表格的行<tfoot> 定义表格的表注(底部)<tbody> 定义表格主体<td> 定义一个单元格

基本的表格结构:标题、头部、主体和底部

对于表格我们最熟悉的就是table , tr , th , td , thead ,tbody ,tfoot 这几个标签了,对于col , colground 这两个标签很多人都忽视了,也许有的人根本就不知道,但其实这两个标签作用很大。下面我们就一起来看看这两个标签的用法吧。<colgroup>此标签用于对表格中的列进行组合使用 span属性可以指定 colgroup定义的表格列数,该属性的缺省值为 1。所有主流浏览器都支持 colgroup 标签,colgroup 标签只能在 table 元素中使用,colgroup中定义的style颜色属性是会被td中重新定义的颜色覆盖。这时style样式不再是高优先级了。
通过测试发现colgroup中除的background-color,width这两个常用的属性设置值是起作用的,其他一些属性如:color , font-size , font-weight ,给这些属性设置值是不起作用的。所以我们要很好地把这两个属性利用起来。
下面我们来结合图片、代码及文字说明来看看 这个标签的使用:
(一)、如图示,下面表格的每一列的背景色与宽度是不一样的

下面看具体的html代码:

<table class="colgroup_data">
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
</tbody>
</table>

我们看到上面定义了4个colgroup标签,他们分别对应下面的每一列,里面分别定义了一个类名,下面看一下css样式的定义:

.colgroup_data .one_col { background:#f2eada; text-align: center; }
.colgroup_data .two_col { background:#C7E291; text-align: center; font-weight:700; }
.colgroup_data .three_col { background: #fff287; text-align: center; }
.colgroup_data .four_col { color: #0051e6!important; background: #FFBFBF; text-align: center; }

四种样式分别定义了四种背景色。当然我们也可以为每列定义宽度,上面的代码中我们看到第四行,我们给color添加了imgportant,以增加他的优先级,但实际上我们在页面中看到的却不是设定的颜色,而是td单元格中定义的属性。(二)、结合js进行隔行变色,这样不仅列的颜色可以不一样,行的颜色也可以不一样,这样我们就可以制作出一个单元格背景色多变的多样化表格

下面看具体的html代码:
<table class="colgroup_span">
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
</tbody>
</table>

我们看到上面一段代码只定义了两个colgroup标签,第一个colgroup标签对应第一列,第二个colgroup标签对应第二、三二列,这是因为在第二个colgroup标签里面定义了span属性,值为2。当span属性不写值时,它会被默认为1。上面我们定义了两个colgroup标签,总共对应了下面的三列,但是表格有四列,则剩下的就是没有定义的,它会继承表格默认的样式。下面我们来看上面表格中的css样式定义:

.colgroup_span .one_col { background:#f2eada; text-align: center; }
.colgroup_span .two_col { background:#fff287; text-align: center; }

分别定义了第一列为很浅红,第二列、第三列为淡黄色,剩下的则是没有定义的,默认为白色。但我们现在看到的表格的颜色不是纯粹的上面定义的两列的颜色,这是因为我们添加了一段js,给表格的偶数行添加了青色背景。这时我们会发现我们列定义的背景颜色被行定义的样式覆盖了,这不是因为js添加的行的样式写大下面,优先级比较高的原因,而是因为colgroup中定义的属性值会被td单元格中定义的属性值覆盖,除非td单元格不定义样式,则会以colgroup标签中的样式为准。
我们上面写到虽然给colgroup定义了颜色属性,但却没有达到预期的效果。通过多次测试,发现colgroup标签只有background-color、width这两个属性是起作用的。其他的属性,如:font-size、font-weight、color等属性,给他们设值是不起作用的,td单元格依旧以他们自己的默认属性值为标准,如果td单元格没有设置样式,它们则会继承td单元格父级的样式,也不会用colgroup标签中设置的属性值。(注:通过测试发现大IE6及IE7下面colgroup中设置的一系列属性值是有作用的,但鉴于浏览器的兼容性,所以除了background-color、width这两个属性可以使用外,其他属性不建议使用)如果哪位高手知道colgroup中在不同浏览器下均可使用的属性欢迎补充。
此元素是块元素,它不需要关闭标签。
col元素可嵌套于 colgroup元素内。这时嵌套的 col 属性将覆盖 colgroup属性。col和 colgroup元素可用于类似的目的。如果我们在 colgroup中嵌套了col元素,则应该避免在 colgroup中再使用 span标签属性。因为嵌套的 col中的 span属性将覆盖 colgroup中的标签属性。如果两个都定义span标签属性也容易引起代码的混乱意想不到的结果。
下面我们来看几种col标签的使用情况:
(一)、col标签控制列的宽度及背景色

具体html代码:

<table class="colgroup_col">
<col align="right" />
<col />
<col />
<col />
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
</tbody>
</table>

这段代码是不是很熟悉,就是上面的学习colgroup标签时的代码,只是这里将colgroup标签换成了col标签,然后根据里面定义的类名对这个表格的每个列的背景及宽度进行定义。
css样式代码:

.colgroup_col .one_col { background:#f2eada; text-align: center; }
.colgroup_col .two_col { width:250px; background:#C7E291; text-align: center; }
.colgroup_col .three_col { background:#fff287; text-align: center; }
.colgroup_col .four_col { color: #ffd400; background: #FFBFBF; text-align: center; }

上面四行css样式分别定义 了每一列的背景及宽度。这里发现一个有趣的现象,正常我们写了什么结构,在页面下查看源码的时候,也应该看到什么样的结构

通常情况下我们会认为我们应该看到如上图一样的表格结构,但通过在不同浏览器下测试发现(目前只测试了火狐与chrome两个浏览器),在相同内核浏览器下随着浏览器版本的升级,它们对col与colgroup标签有了不同的解析,我们看一下下面的截图:

浏览器经过解析给col标签自动添加了父级标签colgroup,通过看上面两张图的比较,我们可以对colgroup和col有更好地理解了,col与colgroup都是定义列的标签元素,但colgroup标签还可以定义列的组,它可以单独使用,也可以结合col标签一起使用。通过上面在高版本浏览器下的测试的例子,说明浏览器对col标签的解析更深入贴切了,所以个人建意以后使用col标签的时候,配合colgroup标签一起使用,这样才更符合标签的语义话。
(二)、col标签结合colgroup标签的使用

具体html代码:

<table class="colgroup_col">
<col />
<col />
<col />
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>沃尔玛</td>
<td>351,139.0</td>
<td>11,284.0</td>
</tr>
</tbody>
</table>

通过上面代码我们知道,第一列为一组,剩下的三列为一组,第二组又分为三列,而第二组中的第一个col标签又定义了二、三两列的样式,第二个标签则定义了第三列的样式。


具体html代码:

<table class="col_span">
<col span="2" />
<col />
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>沃尔玛</td>
<td>351,139.0</td>
<td>11,284.0</td>
</tr>
</tbody>
</table>

从上面的代码我们可以看出col可以和clogroup标签一样使用span属性来控制的列数
通过上面图片、代码及文字的说明我们可以很清楚地知道col及colgroup标签的区别及使用方法了。理解不到位的地方,欢迎大家指出与补充:)
表格强制换行(非亚洲语言文本)我们经常会遇到表格的数据太多而,将页面撑破的情况,这时就需要对表格进行控制了。下面我们一起来看如何解决表格强制换行的问题。
表格强制换行,有一个必须的条件就是经要表格定义宽度。一定是表格本身的宽度,而不是td单元格的宽度。
我们依旧图片、代码及文字说明相结合来学习这个问题的解决方法:

我们将单词之间的空格去掉了,变成一个单词,我们可以看到一个单词之间断开换行了。下面我们 来研究一下代码。
具体html代码:

<table class="wordWrap_table">
<tbody>
<tr>
<td class="wrap_td">Innovationhasnolimits.Theonlylimitisyourimagination!!!!!!!!!!!!!!!!!!!</td>
</tr>
</tbody>
</table>

我们为表格添加了一个类名,为td也添加了一个类名
具体css代码:

.wordWrap_table{ width:200px; table-layout:fixed; word-wrap:break-word; }
.wrap_td{ padding:10px; font-size:16px; border:1px solid #ddd; }

首先为表格定义宽度,然后table-layout:fixed;它指示表格不要试图自己计算表格宽度,而是按照HTML中定义的宽度来显示。当table- layout:fixed和word-wrap:break-word同时指定时,针对连续符号的断字才会正确发生。缺少table-layout:fixed,断字不会发生,表格仍被撑大。缺少word-wrap:break-word,则表格不会被撑大,但断字不会发生,超过显示区域的内容将被hide。固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。看到一些例子,里面添加了word-break:break-all;这个控制属性,虽然这样也能强制换行,但在不同浏览器下会有一些小小的差别。

这种情况是大火狐,Opera浏览器下出现的情况

IE6 、IE7、IE8、Chrome等浏览器下出现的情况,通过比较我们发现一个细微的差别。就是第一行一个是单词换行了,另一个是单词断了换行word-break:break-all; 的解释:如table宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了长,但这个理论通过上面两张图片的比较,知道火狐与Opera是不适用的,如果是对各个主流浏览器要求比较高的情况下,建议不要加word-break:break-all;。通过上面的表格强制换行的情况,对div中出现的强制换行我们也作一个相应的扩充邮箱地址换行我们建站时经常会遇到大侧边栏添加邮箱地址的情况,但经常会遇到邮箱地址太长的情况,以前的解决方法就是大邮箱地址长度确定的情况下,改变字体大小,或者 添加强制换行符,但其实这些可扩展性不强,遇到不同长度邮箱地址的时候不能随机应变。下面我们就来看一个例子

具体html代码:

<ul class="aside_contact">
<li><span>Email:</span><a href="#">hair@rubbermachinesupplier.com</a></li>
<li><span>Address:</span>Menlo Park</li>
</ul>

具体css代码:

.aside_contact{ width:180px; padding:10px; }
.aside_contact li{ padding:5px 0; overflow:hidden;}
.aside_contact li span{ float:left; width:50px;}
.aside_contact li a{ float:left; width:110px; word-wrap:break-word;}

强制换行都是在宽度定的情况结合table-layout及word-wrap才达到完美的强制换行的效果的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,930评论 1 332
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,642评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,928评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,639评论 0 193
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,806评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,698评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,139评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,864评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,485评论 0 230
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,955评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,355评论 1 243
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,811评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,300评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,840评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,464评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,577评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,628评论 2 249

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,168评论 1 41
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,665评论 3 184
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,611评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,435评论 32 459
  • HTML需要掌握标签 标签(空格分隔): H5+CSS [TOC] 常用标签 img 注意点 和H系列标签/p标签...
    袁俊亮技术博客阅读 2,023评论 1 8