一香嗓、概述
????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元素中盗忱;
示例: