總結(jié)HTML 表格標(biāo)簽

一香嗓、概述

????HTML表格由table標(biāo)簽以及一個或多個tr驶拱、th或td標(biāo)簽組成:table標(biāo)簽用來定義表格额获;tr標(biāo)簽用來定義表格中的行够庙,它是單元格的容器,每行可以包含多個單元格抄邀;td標(biāo)簽和th標(biāo)簽用來定義單元格耘眨,所有單元格都在tr標(biāo)簽內(nèi),具體的表格內(nèi)容放置在一對td標(biāo)簽或th標(biāo)簽之中境肾。

二剔难、table 標(biāo)簽

?1)border 設(shè)置 table 的邊框?qū)挾龋籦order 取值為空字符串或 "1", 若為 "1" 奥喻,則為數(shù)據(jù)表格偶宫,否則為布局表格!?

2)summary 屬性描述表格摘要信息环鲤;border 和 summary 屬性必須填纯趋!

? 3)cellpadding 屬性為表格填充,規(guī)定單元格內(nèi)容與單元格邊沿之間的空間冷离,類似盒子標(biāo)簽中的padding屬性吵冒;

? 4)cellspacing 屬性規(guī)定單元格之間的空間

? cellspacing 設(shè)為 0 時,表格間沒有間距西剥,表格邊框?qū)⒕o挨著顯示痹栖,使用 css 的 border-collapse = collapse; 屬性可以使表格邊框合并

? 5)frame 屬性 :規(guī)定外側(cè)邊框的那個部分是可見的

? 1、void :不現(xiàn)實外側(cè)邊框蔫耽;?

?2结耀、box :顯示所有的外側(cè)邊框留夜;?

?3匙铡、border :顯示所有的外側(cè)邊框图甜,與 frame = "box" 顯示效果相同;

? 4鳖眼、above :顯示上部的外側(cè)邊框黑毅;

? 5、below :顯示下部的外側(cè)邊框钦讳;?

?6矿瘦、lns :顯示左側(cè)的邊框;?

?7愿卒、rhs :顯示右側(cè)的邊框缚去;?

?8、hsides :顯示上下側(cè)的外側(cè)邊框琼开;?

?9易结、vsides :顯示左右側(cè)的外側(cè)邊框。

? 6) rules 屬性 :規(guī)定內(nèi)測邊框的那個部分是可見的

1柜候、none :內(nèi)部沒有線條搞动;

?2、all :顯示內(nèi)部所有的線條渣刷;

?3鹦肿、rows :顯示行之間的線條;?

4辅柴、cols :顯示列之間的線條箩溃;

?5、groups :顯示行組與列祖之間的線條碌嘀;

三碾篡、caption 標(biāo)簽:定義表格的標(biāo)題

表格標(biāo)題默認(rèn)居中顯示于表格內(nèi)容上方,表格邊框不會將標(biāo)題包含進(jìn)去筏餐,代碼如下:

<table border=1>

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

????????<tr>

????????????<td>數(shù)據(jù)1</td>

????????????<td>數(shù)據(jù)2</td>

????????????<td>數(shù)據(jù)3</td>

????????????<td>數(shù)據(jù)4</td>

????????</tr>

????????<tr>

????????????<td>數(shù)據(jù)1</td>

????????????<td>數(shù)據(jù)2</td>

????????????<td>數(shù)據(jù)3</td>

????????????<td>數(shù)據(jù)4</td>

????????</tr>

</table>

align 屬性:規(guī)定表格標(biāo)題顯示位置 开泽,其屬性值如下:

????????top :表格標(biāo)題顯示于表格的上方,默認(rèn)魁瞪;

????????bottom :表格標(biāo)題顯示于表格下方穆律;

????????left :表格標(biāo)題顯示于表格左邊(部分瀏覽器支持:如火狐);

????????right :表格標(biāo)題顯示于表格右邊(部分瀏覽器支持:如火狐)导俘。

四峦耘、tr 標(biāo)簽 :定義表格中的行

????????tr 標(biāo)簽內(nèi)不可直接寫內(nèi)容,表格內(nèi)容一定是寫在 td 或 th 標(biāo)簽內(nèi)

1) align 屬性 :規(guī)定表格行中的內(nèi)容水平對齊方式旅薄,其屬性值如下:

????????????right :右對齊內(nèi)容辅髓;

????????????left :左對齊內(nèi)容泣崩;

????????????center:水平居中對齊內(nèi)容;

????????????justify :對行進(jìn)行伸展洛口,每行長度相等

justify 示例:

? ? ? ?<table border=1 width="100">

????????<tr align="justify">

????????????<th>數(shù)據(jù)11111111</th>

????????????<th>數(shù)據(jù)222222222222222</th>

????????????<th>數(shù)據(jù)3333333333333333333</th>

????????????<th>數(shù)據(jù)444444</th>

????????</tr>

</table>

2) valign 屬性:規(guī)定表格行中內(nèi)容的垂直對齊方式矫付,其屬性值如下:

????????????top :頂部對齊內(nèi)容;

????????????middle :垂直居中對齊內(nèi)容第焰;

????????????bottom :底部對齊內(nèi)容买优;

????????????baseline :內(nèi)容與基線對齊

3)background-color 屬性:設(shè)置表格行的背景顏色;

五挺举、單元格標(biāo)簽 :th 標(biāo)簽 和 td 標(biāo)簽

????????1杀赢、th 標(biāo)簽 :定義表格表頭單元格

????????????單元格文本一般顯示為居中的粗體文本

????????2、td 標(biāo)簽 :定義表格標(biāo)準(zhǔn)單元格

????????????單元格文本一般顯示為左對齊的普通文本

????????3湘纵、rowspan 屬性 :規(guī)定單元格橫跨的行數(shù)

????????4脂崔、colspan 屬性:規(guī)定單元格橫跨的列數(shù)

? ? ? ? 示例:

????????5、width 屬性 :設(shè)置單元格的寬度梧喷;

????????6砌左、height 屬性 :設(shè)置單元格的高度;

????????7伤柄、align 屬性:規(guī)定單元格內(nèi)容的水平對齊方式绊困;

????????8、valign 屬性 :規(guī)定單元格內(nèi)容的垂直水平對齊方式适刀;

????????9秤朗、nowrap 屬性 :規(guī)定單元格內(nèi)容不換行。

六笔喉、表格內(nèi)容分組標(biāo)簽 :

????????thead 標(biāo)簽 :組合表格的表頭部分

????????tbody 標(biāo)簽 :組合表格的主體部分

????????tfoot 標(biāo)簽 :組合表格的頁腳 / 腳注內(nèi)容

????????這幾個標(biāo)簽主要是用于提高 table 標(biāo)簽的加載以及顯示的取视,即分部加載,不用等到整個表格加載完再顯示單元格數(shù)據(jù)常挚;

示例:


七 作谭、列標(biāo)簽 : colgroup標(biāo)簽 , col 標(biāo)簽

????????????align :規(guī)定列中內(nèi)容的水平對齊方式

????????????valign:規(guī)定列中內(nèi)容垂直對齊方式

????????????span:規(guī)定列橫跨的列數(shù)

????????????width:規(guī)定列的寬度

????1奄毡、colgroup標(biāo)簽:用于對表格中的列進(jìn)行分組,以便對其進(jìn)行格式化 折欠;colgroup標(biāo)簽只能在table標(biāo)簽中使用;

? ? ?2吼过、col標(biāo)簽:為表格中的一個或多個列定義屬性值锐秦,

????????????col標(biāo)簽只能在table標(biāo)簽或colgroup標(biāo)簽中使用;

????????????col標(biāo)簽是只包含屬性的空元素,列的內(nèi)容均顯示在tr元素內(nèi)的td元素中盗忱;

示例:


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末酱床,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子趟佃,更是在濱河造成了極大的恐慌扇谣,老刑警劉巖昧捷,帶你破解...
    沈念sama閱讀 212,222評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異罐寨,居然都是意外死亡靡挥,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評論 3 385
  • 文/潘曉璐 我一進(jìn)店門衩茸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來芹血,“玉大人贮泞,你說我怎么就攤上這事楞慈。” “怎么了啃擦?”我有些...
    開封第一講書人閱讀 157,720評論 0 348
  • 文/不壞的土叔 我叫張陵囊蓝,是天一觀的道長。 經(jīng)常有香客問我令蛉,道長聚霜,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,568評論 1 284
  • 正文 為了忘掉前任珠叔,我火速辦了婚禮蝎宇,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘祷安。我一直安慰自己姥芥,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,696評論 6 386
  • 文/花漫 我一把揭開白布汇鞭。 她就那樣靜靜地躺著凉唐,像睡著了一般。 火紅的嫁衣襯著肌膚如雪霍骄。 梳的紋絲不亂的頭發(fā)上台囱,一...
    開封第一講書人閱讀 49,879評論 1 290
  • 那天,我揣著相機(jī)與錄音读整,去河邊找鬼簿训。 笑死,一個胖子當(dāng)著我的面吹牛米间,可吹牛的內(nèi)容都是我干的强品。 我是一名探鬼主播,決...
    沈念sama閱讀 39,028評論 3 409
  • 文/蒼蘭香墨 我猛地睜開眼车伞,長吁一口氣:“原來是場噩夢啊……” “哼择懂!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起另玖,我...
    開封第一講書人閱讀 37,773評論 0 268
  • 序言:老撾萬榮一對情侶失蹤困曙,失蹤者是張志新(化名)和其女友劉穎表伦,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體慷丽,經(jīng)...
    沈念sama閱讀 44,220評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡蹦哼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,550評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了要糊。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片纲熏。...
    茶點故事閱讀 38,697評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖锄俄,靈堂內(nèi)的尸體忽然破棺而出局劲,到底是詐尸還是另有隱情,我是刑警寧澤奶赠,帶...
    沈念sama閱讀 34,360評論 4 332
  • 正文 年R本政府宣布鱼填,位于F島的核電站,受9級特大地震影響毅戈,放射性物質(zhì)發(fā)生泄漏苹丸。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,002評論 3 315
  • 文/蒙蒙 一苇经、第九天 我趴在偏房一處隱蔽的房頂上張望赘理。 院中可真熱鬧,春花似錦扇单、人聲如沸商模。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,782評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽阻桅。三九已至,卻和暖如春兼都,著一層夾襖步出監(jiān)牢的瞬間嫂沉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,010評論 1 266
  • 我被黑心中介騙來泰國打工扮碧, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留趟章,地道東北人。 一個月前我還...
    沈念sama閱讀 46,433評論 2 360
  • 正文 我出身青樓慎王,卻偏偏與公主長得像蚓土,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子赖淤,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,587評論 2 350

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