從屌絲到架構(gòu)師的飛越（HTML篇）- HTML表格

一、介紹

表格绢掰，又稱為表焰枢，即是一種可視化交流模式忆矛，又是一種組織整理數(shù)據(jù)的手段。人們?cè)谕ㄓ嵔涣髟１恪⒖茖W(xué)研究以及數(shù)據(jù)分析活動(dòng)當(dāng)中廣泛采用著形形色色的表格搪搏。各種表格常常會(huì)出現(xiàn)在印刷介質(zhì)、手寫記錄闪金、計(jì)算機(jī)軟件疯溺、建筑裝飾、交通標(biāo)志等許許多多地方哎垦。隨著上下文的不同囱嫩，用來(lái)確切描述表格的慣例和術(shù)語(yǔ)也會(huì)有所變化。此外漏设，在種類墨闲、結(jié)構(gòu)、靈活性郑口、標(biāo)注法鸳碧、表達(dá)方法以及使用方面，不同的表格之間也炯然各異犬性。在各種書籍和技術(shù)文章當(dāng)中瞻离，表格通常放在帶有編號(hào)和標(biāo)題的浮動(dòng)區(qū)域內(nèi)，以此區(qū)別于文章的正文部分乒裆。

HTML中表格其實(shí)就是很多的小單元格套利，而這些小單元格很有次序的排列著，它們有很多行，很多列肉迫。這些很多行列組成的東西验辞，就叫表格，表格是<table>標(biāo)簽來(lái)定義的喊衫。而<table>標(biāo)簽中的行就是<tr>標(biāo)簽跌造，而列就是<td>標(biāo)簽，必須先定義行才能定義列族购。因?yàn)閔tml中壳贪，每一列是在一行當(dāng)中的。

二联四、知識(shí)點(diǎn)介紹

1撑碴、表格

2撑教、表格的基本語(yǔ)法

3朝墩、表格<table>標(biāo)簽的常用屬性

4、設(shè)置分隔線的顯示狀態(tài) rules

5伟姐、表格的邊框顯示狀態(tài) frame

6收苏、表格行的設(shè)定

7、單元格的設(shè)定

8愤兵、設(shè)定跨多行多列單元格

9鹿霸、表格的行分組

10、表格的列分組

11秆乳、表格行列分組

12懦鼠、表格的標(biāo)題標(biāo)簽

13、表格的嵌套

三屹堰、上課對(duì)應(yīng)視頻的說(shuō)明文檔

1肛冶、表格

表格在網(wǎng)站應(yīng)用中非常廣泛,可以方便靈活的排版,很多動(dòng)態(tài)大型網(wǎng)站也都是借助表格排版,表格可以把相互關(guān)聯(lián)的信息元素集中定位,使瀏覽頁(yè)面的人一目了然.所以說(shuō)要制作好網(wǎng)頁(yè),就要學(xué)好表格

2、表格的基本語(yǔ)法

html 文檔中扯键，表格是通過(guò)<table>,<th>,<tr>,<td>標(biāo)簽來(lái)完成的睦袖，如下表所示：

<HTML>

<HEAD>

</HEAD>

<BODY>

<table>

< caption >表格標(biāo)題</caption >

<tr>

</tr>

<tr>

</tr>

</table>

</center>

</BODY>

</HTML>

3、表格<table>標(biāo)簽的常用屬性

<html>

<head>

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

</tr>

<tr>

</tr>

</table>

</body>

</html>

4荣刑、設(shè)置分隔線的顯示狀態(tài) rules

語(yǔ)法格式：<table rules="值">

<html>

<head>

</head>

<body>

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

height="160" align="center">

<TR>

</TR>

<TR>

</TR>

</TABLE><p>

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

height="160" align="center">

<TR>

</TR>

<TR>

</TR>

</TABLE>

</body>

</html>

5馅笙、表格的邊框顯示狀態(tài) frame

表格的邊框分別有上邊框、下邊框厉亏、左邊框董习、右邊框。這四個(gè)邊框都可以設(shè)置為顯示或隱藏狀態(tài)

語(yǔ)法格式：<table frame="邊框顯示值">

<HTML>

<HEAD>

<TITLE>表格邊框的顯示狀態(tài)</TITLE>

</HEAD>

<BODY >

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

width="400" height="160">

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

6爱只、表格行的設(shè)定

表格是按行和列（單元格）組成的阱飘，一個(gè)表格有幾行組成就要有幾個(gè)行標(biāo)簽<tr>，行標(biāo)簽用它的屬性值來(lái)修飾，屬性都是可選的沥匈。

<HTML>

<HEAD>

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

</HEAD>

<BODY>

</TR>

</tr>

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

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

</TR>

</TABLE>

</BODY>

</HTML>

7蔗喂、單元格的設(shè)定

<th>和<td>都是插入單元格的標(biāo)簽，這兩個(gè)標(biāo)簽必須嵌套在<tr>標(biāo)簽內(nèi)高帖。是成對(duì)出現(xiàn)的缰儿。<th>用于表頭標(biāo)簽，表頭標(biāo)簽一般位于首行或首列散址，標(biāo)簽之間的內(nèi)容就是位于該單元格內(nèi)的標(biāo)題內(nèi)容乖阵，其中的文字以粗體居中顯示。數(shù)據(jù)標(biāo)簽<td>就是該單元格中的具體數(shù)據(jù)內(nèi)容,<th>和<td>標(biāo)簽的屬性都是一樣的预麸，

<HTML>

<HEAD>

<TITLE>單元格的設(shè)定</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

<html>

<head>

</head>

<p>我終于明白瞪浸，我其實(shí)有一條韌性十足的命，它遠(yuǎn)比我想象中的那條命結(jié)實(shí)得多吏祸、耐磨的多……</p>

<p>單元格未設(shè)置nowrap 屬性的空表：</p>

<tr>

</tr>

</table>

<tr>

<td>我終于明白对蒲，我其實(shí)有一條韌性十足的命，它遠(yuǎn)比我想象中的那條命結(jié)實(shí)得多贡翘、耐磨的多……</td>

</tr>

</table>

<p>單元格設(shè)置了nowrap 屬性蹈矮，未設(shè)置width 屬性：</p>

<tr>

<td nowrap>我終于明白，我其實(shí)有一條韌性十足的命鸣驱，它遠(yuǎn)比我想象中的那條命結(jié)實(shí)得多泛鸟、耐磨的多……

</td>

</tr>

</table>

<p>單元格設(shè)置了nowrap 屬性，也設(shè)置了width 屬性：</p>

<tr>

<td width="120" nowrap>我終于明白踊东，我其實(shí)有一條韌性十足的命北滥，它遠(yuǎn)比我想象中的那條命結(jié)實(shí)得

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

</tr>

</table>

</body>

</html>

8闸翅、設(shè)定跨多行多列單元格

要?jiǎng)?chuàng)建跨多行再芋、多列的單元格，只需在<TH>或<TD>中加入ROWSPAN 或COLSPAN 屬性的屬性值缎脾，默認(rèn)值為1祝闻。表明了表格中要跨越的行或列的個(gè)數(shù)。

跨多列的語(yǔ)法： <th colspan=#> <td colspan=#>

colspan 表示跨越的列數(shù)遗菠，例如colspan=2 表示這一格的寬度為兩個(gè)列的寬度联喘。

跨多行的語(yǔ)法： <th rowspan=#> <td rowspan=#>

rowspan 所要表示的意義是指跨越的行數(shù)，例如rowspan=2 就表示這一格跨越表格兩個(gè)行的高度辙纬。

<html>

<head>

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

</head>

<body>

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

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

bordercolordark="#9900CC">

<TH colspan=3> 學(xué)生基本信息</TH>

</TR>

</TR>

</TR>

</TR>

</table>

</body>

</html>

9豁遭、表格的行分組

html 文檔的表格按行分組是由表頭標(biāo)簽<thead>、表格主體標(biāo)簽<tbody>和尾注標(biāo)簽<tfoot>三個(gè)部分組成的贺拣。其中尾注標(biāo)簽很少用蓖谢。<thead>標(biāo)簽是成對(duì)標(biāo)簽捂蕴，其標(biāo)簽內(nèi)是由表頭標(biāo)簽標(biāo)識(shí)的表頭元素。<tbody>標(biāo)簽用于規(guī)定表格主體部分的元素闪幽，可出現(xiàn)多次啥辨。<thead>和<tbody>標(biāo)簽的屬性和<th><td>標(biāo)簽是一樣的。

<html>

<head>

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

</head>

<body>

</TR>

</thead>

</TR>

</TR>

</tbody>

</table>

</body>

</html>

10盯腌、表格列分組

html 使用<colgroup>標(biāo)簽來(lái)將表格分組溉知。

語(yǔ)法格式：<colgroup span="數(shù)值" align="參數(shù)">

說(shuō)明：<colgroup>標(biāo)簽有兩個(gè)屬性，span 和align, 他們都是可選的腕够。span 屬性的值是數(shù)字级乍，表示該組包含的列數(shù)，默認(rèn)值為1帚湘。align 屬性用以規(guī)定該組所跨列中所有單元格中內(nèi)容在水平方向上的位置玫荣。該屬性的值為left,center,right 之一。它們表示單元格的內(nèi)容是左對(duì)齊大诸，水平居中還是右對(duì)齊捅厂。

<html>

<head>

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

</head>

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

bordercolordark="#9900FF">

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

11、表格行列分組

組合行列分組

<HTML>

<HEAD>

<TITLE>同時(shí)進(jìn)行行列分組</TITLE>

</HEAD>

<BODY>

<TR>

</THEAD>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TBODY>

</TABLE>

</BODY>

</HTML>

12底挫、表格的標(biāo)題標(biāo)簽

置標(biāo)題位于表格的上方和表格的下方恒傻。下面為表格標(biāo)題位置的設(shè)置格式脸侥。

語(yǔ)法格式：

<caption>應(yīng)放在<table>標(biāo)簽內(nèi)建邓，在表格行標(biāo)簽<tr>標(biāo)簽之前。

<caption>標(biāo)簽的默認(rèn)屬性是標(biāo)題位于表格的上方中間位置睁枕。

<html>

<head>

</head>

<body>

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

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

bordercolordark="#9900CC">

<TH colspan=3> 學(xué)生基本信息</TH>

</TR>

</TR>

</TR>

</TR>

</body>

</html>

13官边、表格的嵌套

在 html 頁(yè)面中，使用表格排版是通過(guò)嵌套來(lái)完成的外遇，即一個(gè)表格內(nèi)部可以嵌套另一個(gè)表格注簿，用表格來(lái)排版頁(yè)面的思路是：由總表格規(guī)劃整體的結(jié)構(gòu)，由嵌套的表格負(fù)責(zé)各個(gè)子欄目的排版跳仿，并插入到表格的相應(yīng)位置诡渴，這樣就可以使頁(yè)面的各個(gè)部分有條不紊，互不沖突菲语，看上去清晰整潔妄辩。在實(shí)際做網(wǎng)頁(yè)時(shí)一般不顯示邊框,邊框的顯示可根據(jù)自己的愛(ài)好來(lái)設(shè)定。在實(shí)例中為了讓大家能夠看清楚山上，都設(shè)置了

<html>

<head>

</head>

<tr>

</tr>

<tr>

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

cellspacing="1">

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

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

align="center">

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末眼耀，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子佩憾，更是在濱河造成了極大的恐慌哮伟，老刑警劉巖干花，帶你破解...
沈念sama閱讀 218,607評(píng)論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異楞黄，居然都是意外死亡池凄，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,239評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門鬼廓，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)修赞，“玉大人，你說(shuō)我怎么就攤上這事桑阶“馗保” “怎么了？”我有些...
開(kāi)封第一講書人閱讀 164,960評(píng)論 0贊 355
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵蚣录，是天一觀的道長(zhǎng)割择。經(jīng)常有香客問(wèn)我，道長(zhǎng)萎河，這世上最難降的妖魔是什么荔泳？我笑而不...
開(kāi)封第一講書人閱讀 58,750評(píng)論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮虐杯，結(jié)果婚禮上玛歌，老公的妹妹穿的比我還像新娘。我一直安慰自己擎椰，他們只是感情好支子，可當(dāng)我...
茶點(diǎn)故事閱讀 67,764評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著达舒，像睡著了一般值朋。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上巩搏，一...
開(kāi)封第一講書人閱讀 51,604評(píng)論 1贊 305
城市分裂傳說(shuō)
那天昨登，我揣著相機(jī)與錄音，去河邊找鬼贯底。笑死丰辣，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的禽捆。我是一名探鬼主播笙什，決...
沈念sama閱讀 40,347評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼睦擂！你這毒婦竟也來(lái)了得湘？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書人閱讀 39,253評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤顿仇，失蹤者是張志新（化名）和其女友劉穎淘正，沒(méi)想到半個(gè)月后摆马，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,702評(píng)論 1贊 315
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡鸿吆，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,893評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年囤采，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片惩淳。...
茶點(diǎn)故事閱讀 40,015評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡蕉毯，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出思犁，到底是詐尸還是另有隱情代虾，我是刑警寧澤，帶...
沈念sama閱讀 35,734評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布激蹲，位于F島的核電站棉磨，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏学辱。R本人自食惡果不足惜乘瓤，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,352評(píng)論 3贊 330
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望策泣。院中可真熱鬧衙傀，春花似錦、人聲如沸萨咕。這莊子的主人今日做“春日...
開(kāi)封第一講書人閱讀 31,934評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)任洞。三九已至蓄喇，卻和暖如春发侵，著一層夾襖步出監(jiān)牢的瞬間交掏，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書人閱讀 33,052評(píng)論 1贊 270
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工刃鳄，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留盅弛，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,216評(píng)論 3贊 371
代替公主和親
正文我出身青樓叔锐，卻偏偏與公主長(zhǎng)得像挪鹏，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子愉烙，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,969評(píng)論 2贊 355

從屌絲到架構(gòu)師的飛越（HTML篇）- HTML表格

推薦閱讀更多精彩內(nèi)容