从屌丝到架构师的飞越（HTML篇）- HTML表格

一、介绍

表格，又称为表，即是一种可视化交流模式，又是一种组织整理数据的手段。人们在通讯交流、科学研究以及数据分析活动当中广泛采用着形形色色的表格。各种表格常常会出现在印刷介质、手写记录、计算机软件、建筑装饰、交通标志等许许多多地方。随着上下文的不同，用来确切描述表格的惯例和术语也会有所变化。此外，在种类、结构、灵活性、标注法、表达方法以及使用方面，不同的表格之间也炯然各异。在各种书籍和技术文章当中，表格通常放在带有编号和标题的浮动区域内，以此区别于文章的正文部分。

HTML中表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些很多行列组成的东西，就叫表格，表格是<table>标签来定义的。而<table>标签中的行就是<tr>标签，而列就是<td>标签，必须先定义行才能定义列。因为html中，每一列是在一行当中的。

二、知识点介绍

1、表格

2、表格的基本语法

3、表格<table>标签的常用属性

4、设置分隔线的显示状态 rules

5、表格的边框显示状态 frame

6、表格行的设定

7、单元格的设定

8、设定跨多行多列单元格

9、表格的行分组

10、表格的列分组

11、表格行列分组

12、表格的标题标签

13、表格的嵌套

三、上课对应视频的说明文档

1、表格

表格在网站应用中非常广泛,可以方便灵活的排版,很多动态大型网站也都是借助表格排版,表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.所以说要制作好网页,就要学好表格

2、表格的基本语法

html 文档中，表格是通过<table>,<th>,<tr>,<td>标签来完成的，如下表所示：

<HTML>

<HEAD>

<TITLE>一个简单的表格</TITLE>

</HEAD>

<BODY>

<center>

<table>

< caption >表格标题</caption >

<tr>

<td>第1 行中的第1 列</td>

<td>第1 行中的第2 列</td>

<td>第1 行中的第3 列</td>

</tr>

<tr>

<td>第2 行中的第1 列</td>

<td>第2 行中的第2 列</td>

<td>第2 行中的第3 列</td>

</tr>

</table>

</center>

</BODY>

</HTML>

3、表格<table>标签的常用属性

<html>

<head>

<title>无标题文档</title>

</head>

<body>

<table border=10 bordercolor="#006803" align="center" bgcolor="#DDFFDD" width=500

height="200"bordercolorlight="#FFFFCC" bordercolordark="#660000"

background="../../imge/b0024.gif" cellspacing="2" cellpadding="8">

<tr>

<td>第1 行中的第1 列</td>

<td>第1 行中的第2 列</td>

<td>第1 行中的第3 列</td>

</tr>

<tr>

<td>第2 行中的第1 列</td>

<td>第2 行中的第2 列</td>

<td>第2 行中的第3 列</td>

</tr>

</table>

</body>

</html>

4、设置分隔线的显示状态 rules

语法格式：<table rules="值">

<html>

<head>

<title>无标题文档</title>

</head>

<body>

<TABLE border=6 bgcolor="#FFFFCC" rules="cols" bordercolor="#9900FF" width="400"

height="160" align="center">

<TR>

<TH>姓名</TH>

<TH>性别</TH>

<TH>年龄</TH>

<TH>专业</TH>

</TR>

<TR>

<TD>笨笨猫</TD>

<TD>女</TD>

<TD>99</TD>

<TD>计算机</TD>

</TR>

</TABLE><p>

<TABLE border=6 bgcolor="#FFFFCC" rules="rows" bordercolor="#9900FF" width="400"

height="160" align="center">

<TR>

<TH>姓名</TH>

<TH>性别</TH>

<TH>年龄</TH>

<TH>专业</TH>

</TR>

<TR>

<TD>笨笨猫</TD>

<TD>女</TD>

<TD>99</TD>

<TD>计算机</TD>

</TR>

</TABLE>

</body>

</html>

5、表格的边框显示状态 frame

表格的边框分别有上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态

语法格式：<table frame="边框显示值">

<HTML>

<HEAD>

<TITLE>表格边框的显示状态</TITLE>

</HEAD>

<BODY >

<TABLE border=6 bgcolor="#FFFFCC" frame="hsides" bordercolor="#9900FF"

width="400" height="160">

<TR>

<TH>姓名</TH>

<TH>性别</TH>

<TH>年龄</TH>

<TH>专业</TH>

</TR>

<TR>

<TD>卡卡</TD>

<TD>男</TD>

<TD>50</TD>

<TD>计算机</TD>

</TR>

</TABLE>

</BODY>

</HTML>

6、表格行的设定

表格是按行和列（单元格）组成的，一个表格有几行组成就要有几个行标签<tr>，行标签用它的属性值来修饰，属性都是可选的。

<HTML>

<HEAD>

<TITLE>表格行的控制</TITLE>

</HEAD>

<BODY>

<TABLE border=1 align="center" width="80%" height="150">

<TR ALIGN="CENTER">

<TH>姓名</TH>

<TH>性别</TH>

<TH>年龄</TH>

<TH>专业</TH>

</TR>

<TR ALIGN=CENTER bordercolor="#336600" bgcolor="#C1FFC1">

<TD>咚咚</TD>

<TD>男</TD>

<TD>18</TD>

<TD>学生</TD>

</tr>

<tr align=center height=50 bordercolor=navy bgcolor="#86B8E1" valign=bottom

bordercolorlight="#E1F0FD" bordercolordark="#002346">

<TD>楠楠</TD>

<TD>女</TD>

<TD>17</TD>

<TD>学生</TD>

</TR>

</TABLE>

</BODY>

</HTML>

7、单元格的设定

<th>和<td>都是插入单元格的标签，这两个标签必须嵌套在<tr>标签内。是成对出现的。<th>用于表头标签，表头标签一般位于首行或首列，标签之间的内容就是位于该单元格内的标题内容，其中的文字以粗体居中显示。数据标签<td>就是该单元格中的具体数据内容,<th>和<td>标签的属性都是一样的，

<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT"valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000"bordercolordark="#00FF00" background="myweb.gif">

<HTML>

<HEAD>

<TITLE>单元格的设定</TITLE>

</HEAD>

<BODY>

<TABLE border=1 align="center" height="150" width="80%">

<TR>

<TH width=70 bgcolor="#FFCC00">姓名</TH>

<TH bgcolor="#FFCCFF">性别</TH>

<TH background="../../imge/b0024.gif">年龄</TH>

<TH background="../../imge/aki-5.gif">专业</TH>

</TR>

<TR>

<TD bordercolor=red align="left">笨笨猫</TD>

<TD bordercolorlight="#FFCCFF" bordercolordark="#FF0000" align="center">女</TD>

<TD bgcolor="#FFFFCC" valign="bottom" align="center">18</TD>

<TD bgcolor="#CCFFFF" align="right">学生</TD>

</TR>

</TABLE>

</BODY>

</HTML>


<html>

<head>

<title>wrap 属性研究</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>

<body bgcolor="#FFFFFF" text="#000000">

<p>测试字符串：</p>

<p>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……</p>

<p>单元格未设置nowrap 属性的空表：</p>

<table width="100" border="1" cellspacing="0" cellpadding="0">

<tr>

<td>&nbsp;</td>

</tr>

</table>

<p>加入测试字符串：</p>

<table width="100" border="1" cellspacing="0" cellpadding="0">

<tr>

<td>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……</td>

</tr>

</table>

<p>单元格设置了nowrap 属性，未设置width 属性：</p>

<table width="100" border="1" cellspacing="0" cellpadding="0">

<tr>

<td nowrap>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……

</td>

</tr>

</table>

<p>单元格设置了nowrap 属性，也设置了width 属性：</p>

<table width="200" border="1" cellspacing="0" cellpadding="0">

<tr>

<td width="120" nowrap>我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得

多、耐磨的多……</td>

<td>&nbsp;</td>

</tr>

</table>

</body>

</html>

8、设定跨多行多列单元格

要创建跨多行、多列的单元格，只需在<TH>或<TD>中加入ROWSPAN 或COLSPAN 属性的属性值，默认值为1。表明了表格中要跨越的行或列的个数。

跨多列的语法： <th colspan=#> <td colspan=#>

colspan 表示跨越的列数，例如colspan=2 表示这一格的宽度为两个列的宽度。

跨多行的语法： <th rowspan=#> <td rowspan=#>

rowspan 所要表示的意义是指跨越的行数，例如rowspan=2 就表示这一格跨越表格两个行的高度。

<html>

<head>

<title>跨多行跨多列的单元格</title>

</head>

<body>

<center>

<table border=10 width=80% align="center" height="150"

background="../../imge/b0024.gif" bordercolorlight="#9999FF"

bordercolordark="#9900CC">

<TR ALIGN=center>

<TH colspan=3> 学生基本信息</TH>

<TH colspan=2>成绩</TH>

</TR>

<TR ALIGN=center>

<TH>姓名</TH>

<TH>性别</TH>

<TH>专业</TH>

<TH>课程</TH>

<TH>分数</TH>

</TR>

<TR ALIGN=center>

<TD>咚咚</TD>

<TD>男</TD>

<TD rowspan=2>计算机</TD><TD rowspan=2>程序设计</TD>

<TD>68</TD>

</TR>

<TR ALIGN=center>

<TD>喃喃</TD>

<TD>女</TD>

<TD>89</TD>

</TR>

</table>

</body>

</html>

9、表格的行分组

html 文档的表格按行分组是由表头标签<thead>、表格主体标签<tbody>和尾注标签<tfoot>三个部分组成的。其中尾注标签很少用。<thead>标签是成对标签，其标签内是由表头标签标识的表头元素。<tbody>标签用于规定表格主体部分的元素，可出现多次。<thead>和<tbody>标签的属性和<th><td>标签是一样的。

<html>

<head>

<title>表格按行分组</title>

</head>

<body>

<center>

<table border=3 width=60% align="center" height="150">

<thead bgcolor="#CCFFCC">

<TR ALIGN=center>

<TH>姓名</TH>

<TH>性别</TH>

<TH>专业</TH>

</TR>

</thead>

<tbody bgcolor="#448FBD">

<TR ALIGN=center>

<TD>咚咚</TD><TD>男</TD><TD>计算机</TD>

</TR>

<TR ALIGN=center>

<TD>喃喃</TD><TD>女</TD><TD>园林</TD>

</TR>

</tbody>

</table>

</body>

</html>

10、表格列分组

html 使用<colgroup>标签来将表格分组。

语法格式：<colgroup span="数值" align="参数">

说明：<colgroup>标签有两个属性，span 和align, 他们都是可选的。span 属性的值是数字，表示该组包含的列数，默认值为1。align 属性用以规定该组所跨列中所有单元格中内容在水平方向上的位置。该属性的值为left,center,right 之一。它们表示单元格的内容是左对齐，水平居中还是右对齐。

<html>

<head>

<title>表格按列分组</title>

</head>

<center>

<table border=10 width=80% height="160" align="center" bordercolorlight="#CCCCFF"

bordercolordark="#9900FF">

<tr>

<th>姓名</th><th>性别</th><th>专业</th><th>分数</th>

</tr>

<colgroup span=2 align=center>

<colgroup align =left>

<colgroup align=right>

<tr>

<td>咚咚</td><td>男</td><td>计算机</td><td>79</td>

</tr>

<tr>

<td>喃喃</td><td>女</td><td>园林</td><td>90</td>

</tr>

<tr>

<td>依依</td><td>女</td><td>微波通信</td><td>76<td>

</tr>

</table>

</body>

</html>

11、表格行列分组

组合行列分组

<HTML>

<HEAD>

<TITLE>同时进行行列分组</TITLE>

</HEAD>

<BODY>

<CENTER>

<TABLE BORDER=10 WIDTH=80% height="200" align="center" bordercolor="#9900FF">

<COLGROUP SPAN=2 ALIGN=CENTER>

<COLGROUP ALIGN=LEFT>

<COLGROUP ALIGN=RIGHT>

<THEAD bgcolor="#FFFFCC">

<TR><TH>姓名</TH><TH>性别</TH><TH>专业</TH><TH>分数</TH>

<TR>

</THEAD>

<TBODY bgcolor="#FFCCFF">

<TR>

<TD>咚咚</TD><TD>男</TD><TD>计算机</TD><TD>85</TD>

</TR>

<TR>

<TD>喃喃</TD><TD>女</TD><TD>园林</TD><TD>94</TD>

</TR>

<TR>

<TD>依依</TD><TD>女</TD><TD>微波通信</TD><TD>87</TD>

</TR>

</TBODY>

</TABLE>

</BODY>

</HTML>

12、表格的标题标签

置标题位于表格的上方和表格的下方。下面为表格标题位置的设置格式。

语法格式：

<caption align="值" valign="值" >表哥标题</caption>

<caption>应放在<table>标签内，在表格行标签<tr>标签之前。

<caption>标签的默认属性是标题位于表格的上方中间位置。

<html>

<head>

<title>表格的标题标签</title>

</head>

<body>

<center>

<table border=10 width=80% align="center" height="150"

background="../../imge/b0024.gif" bordercolorlight="#9999FF"

bordercolordark="#9900CC">

<caption>学生信息表</caption>

<TR ALIGN=center>

<TH colspan=3> 学生基本信息</TH>

<TH colspan=2>成绩</TH>

</TR>

<TR ALIGN=center>

<TH>姓名</TH>

<TH>性别</TH>

<TH>专业</TH>

<TH>课程</TH>

<TH>分数</TH>

</TR>

<TR ALIGN=center>

<TD>咚咚</TD>

<TD>男</TD>

<TD rowspan=2>计算机</TD><TD rowspan=2>程序设计</TD>

<TD>68</TD>

</TR>

<TR ALIGN=center>

<TD>喃喃</TD>

<TD>女</TD>

<TD>89</TD>

</TR>

</body>

</html>

13、表格的嵌套

在 html 页面中，使用表格排版是通过嵌套来完成的，即一个表格内部可以嵌套另一个表格，用表格来排版页面的思路是：由总表格规划整体的结构，由嵌套的表格负责各个子栏目的排版，并插入到表格的相应位置，这样就可以使页面的各个部分有条不紊，互不冲突，看上去清晰整洁。在实际做网页时一般不显示边框,边框的显示可根据自己的爱好来设定。在实例中为了让大家能够看清楚，都设置了

<html>

<head>

<title>表格嵌套</title>

</head>

<body bgcolor="#555555" text="#FFFFFF">

<table width="560" border="3" cellspacing="1" cellpadding="1" align="center">

<tr>

<td width="100" height="69">网页标志</td>

<td colspan="2"><div align="center">广告条</div></td>

</tr>

<tr>

<td height="330">

<table width="100" height="321" border="3" align="center" cellpadding="1"

cellspacing="1">

<tr>

<td>标题栏</td>

</tr>

<tr>

<td>标题栏</td>

</tr>

<tr>

<td>标题栏</td>

</tr>

<tr>

<td>标题栏</td>

</tr>

<tr>

<td>标题栏</td>

</tr>

<tr>

<td>标题栏</td>

</tr>

<tr>

<td>标题栏</td>

</tr>

<tr>

<td>标题栏</td>

</tr>

<tr>

<td>标题栏</td>

</tr>

<tr>

<td height="90">内容六</td>

</tr>

</table>

</td>

<td width="275">

<table width="275" height="325" border="3" cellpadding="1" cellspacing="1">

<tr>

<td width="263">内容一</td>

</tr>

<tr>

<td>内容二</td>

</tr>

</table>

</td>

<td width="163">

<table width="157" height="320" border="3" cellpadding="1" cellspacing="1"

align="center">

<tr>

<td width="136" height="94">内容三</td>

</tr>

<tr>

<td height="62">内容四</td>

</tr>

<tr>

<td height="160">内容五</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,752评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,100评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,244评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,099评论 1赞 286
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,210评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,307评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,346评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,133评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,546评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,702评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,331评论 3赞 319
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2赞 351

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,744评论 1赞 92
  • 学习笔记（一）
    浏览器与服务器的基本概念 浏览器（安装在电脑里面的一个软件） 作用： ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,105评论 0赞 0
  • 从屌丝到架构师的飞越（HTML篇）-HTML基础
    一、介绍 超文本标记语言（外国语简称：HTML）标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本...
    走着别浪阅读 478评论 0赞 4
  • 网络技术与应用
    HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,875评论 0赞 0
  • Html的表格知多少
    前端07班 王 对于table的使用我们会有种先入为主的厌恶。觉得页面中不应该出现表格！其实这只是针对使用HTML...
    ea203453e188阅读 2,705评论 0赞 5