<caption>css |
表格的大標題,該標記能夠出如今<table> 之間的任意位置。它對於搜索引擎的機器人記錄信息十分重要。參數有align、valignhtml |
<col>chrome |
表格的列定義屬性瀏覽器 |
<colgroup>ide |
定義表格列的分組,Firefox、Chrome 以及Safari 僅支持colgroup 元素的span 和width 屬性工具 |
<table>學習 |
定義表格優化 |
<tbody>搜索引擎 |
定義表格主體spa |
<td> |
定義一個單元格 |
<tfoot> |
定義表格的表注(底部) |
<th> |
定義表格的表頭,th元素內部的文本一般會呈現爲粗體 |
<thead> |
定義表格的表頭 |
<tr> |
定義表格的行 |
<table border="1"> <caption>Table caption here</caption> <colgroup span="1" style="background:#DEDEDE;"/> <colgroup span="2" style="background:#EFEFEF;"/> <!-- Table Header--> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead> <!-- Table Footer--> <tfoot> <tr> <td>Foot 1</td> <td>Foot 2</td> <td>Foot 3</td> </tr> </tfoot> <!-- Table Body--> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> </tbody> </table>
<thead> 、<tbody> 、<tfoot> 標記。它們分別表示表格的表頭,表正文,表腳。在打印網頁內容的時候,若是表格很大,一頁打印不完,<thead>和<tfoot>將在每一頁出現(注意:在IE 中無效,但在 Firefox 有效)。
tbody的特色:
爲了讓大表格(table)在下載的時候能夠分段的顯示,就是說在瀏覽器解析HTML時,table是做爲一個總體解釋的,使用tbody能夠優化顯示。若是表格很長,用tbody分段,能夠一部分一部分地顯示,不用等整個表格都下載完成。下載一塊顯示一塊,表格巨大時有比較好的效果。tbody包含行的內容下載完優先顯示,沒必要等待表格結束。另外,還須要注意一個地方。表格行原本是從上向下顯示的。可是,應用了thead/tbody/tfoot之後,就「從頭到腳」顯示,無論你的行代碼順序如何。也就是說若是thead寫在了tbody的後面,html顯示時,仍是以先thead後tbody顯示。
三個注意點:
在將caption的align屬性設置爲left的時候,各個瀏覽器表現出的樣式各不相同
firefox | chrome | IE6 7 8 | IE9 |
![]() |
![]() |
![]() |
![]() |
safari | |||
![]() |
在將caption的align屬性設置爲left的時候,IE6 7對這個屬性有反映,其餘瀏覽器都無動於衷。在標籤style中添加text-align也是一樣的狀況
IE6 7 | IE8 九、firefox、safari、chrome |
![]() |
![]() |
屬性 |
值 |
描述 |
align |
left center right |
不同意使用。請使用樣式代替。 規定表格相對周圍元素的對齊方式。 |
bgcolor |
rgb(x,x,x) #xxxxxx colorname |
不同意使用。請使用樣式代替。 規定表格的背景顏色。 |
border |
pixels |
規定表格邊框的寬度 |
cellpadding |
pixels |
規定單元邊沿與其內容之間的空白 |
cellspacing |
pixels |
規定單元格之間的空白 |
frame |
void |
規定外側邊框的哪一個部分是可見的 |
rules |
none |
規定內側邊框的哪一個部分是可見的 |
width |
% |
規定表格的寬度 |
summary |
text |
規定表格的摘要。用於歸納整個表格的內容。它對於搜索引擎的機器人記錄信息十分重要。摘要是不會顯示出來的,給一些其它的工具使用的,好比盲人閱讀器等。 |
bordercolor |
rgb(x,x,x)
#xxxxxx
colorname
|
設置表格邊框的顏色。但它在不一樣的瀏覽器下顯示的效果不一致。(不推薦使用bordercolor 屬性,而推薦使用CSS 樣式表的border 屬性來進行設置) |
cellspacing在大部分瀏覽器中與style中的border-spacing效果相同,但在IE6 7中略有不一樣
IE6 7 cellspacing=0 | IE6 7 border-spacing=0 |
![]() |
![]() |
css中的border-collapse:collapse | separate 能夠設置表格的邊框是否被合併成一個邊框。將設置爲border-collapse:collapse後,各個瀏覽器顯示各不相同
firefox | chrome | IE6 7 8 | IE9 |
![]() |
![]() |
![]() |
![]() |
safari | |||
![]() |
scope屬性定義將表頭單元與數據單元相關聯的方法;標識某個單元是不是列、行、列組或行組的表頭;不會在普通瀏覽器中產生任何視覺變化;屏幕閱讀器能夠利用該屬性。
使用 scope 屬性,能夠將數據單元格與表頭單元格聯繫起來。經過屬性值 row,表頭行包括的全部表格都將和表頭單元格聯繫起來。指定 col,會將當前列的全部單元格和表頭單元格綁定起來。
<table border="1"> <tr> <th scope="col">Month</th> <th scope="col">Savings</th> </tr> <tr> <td scope="row">1</td> <td>January</td> <td>$100.00</td> </tr> <tr> <td scope="row">2</td> <td>February</td> <td>$10.00</td> </tr> </table>
屬性值 | 說明 |
above | 顯示上邊框 |
border | 顯示上下左右邊框 |
below | 顯示下邊框 |
hsides | 顯示上下邊框 |
lhs | 顯示左邊框 |
rhs | 顯示右邊框 |
void | 不顯示邊框 |
vsides | 顯示左右邊框 |
屬性值 | 說明 |
all | 顯示全部內部邊框 |
groups | 顯示介於行列邊框 |
none | 不顯示內部邊框 |
cols | 僅顯示列邊框 |
rows | 僅顯示行邊框 |
<table border="1" frame="hsides" rules="groups"> <caption>Table caption here</caption> <colgroup span="1" style="background:#DEDEDE;text-align:center"/> <colgroup span="2" style="background:#EFEFEF;"/> <!-- Table Header--> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead> <!-- Table Footer--> <tfoot> <tr> <td>Foot 1</td> <td>Foot 2</td> <td>Foot 3</td> </tr> </tfoot> <!-- Table Body--> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> </tbody> </table>
firefox | chrome | IE6 7 | IE8 |
![]() |
![]() |
![]() |
![]() |
IE9 | safari | ||
![]() |
![]() |
用來指定表格顯示的樣式
table { table-layout: fixed }
* auto(缺省)
* fixed
* inherit
auto表示單元格的大小由內容決定。fixed表示單元格的大小是固定的,由第一個指定大小的單元格決定;若是全部單元格都沒有指定大小,則由第一個單元格的默認大小決定;若是單元格中的內容超出單元格的大小,則用CSS中的overflow命令控制。微軟公司聲稱使用這個命令,表格的顯示速度能夠加快100倍。爲了加快表格顯示,最好事先就在CSS(或者table標籤的width和height屬性)中指定表格的寬度和高度。
熟練掌握表格的colspan、 rowspan屬性,能夠爲所欲爲的製做出複雜的表格。
<table border="1"> <caption>Table caption here</caption> <colgroup span="1" style="background:#DEDEDE;text-align:center"/> <colgroup span="2" style="background:#EFEFEF;"/> <!-- Table Header--> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead> <!-- Table Footer--> <tfoot> <tr> <td>Foot 1</td> <td>Foot 2</td> <td>Foot 3</td> </tr> </tfoot> <!-- Table Body--> <tbody> <tr> <td rowspan="2">A</td> <td>B</td> <td>C</td> </tr> <tr> <td colspan="2">D</td> </tr> </tbody> </table>
發揮你的想象力,玩轉table
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
附加中保存的是示例的html代碼
也能夠進入頁面http://download.csdn.net/download/loneleaf1/7500555下載
參考資料:
http://blog.csdn.net/lujunql/article/details/5529989 table標籤中thead、tbody、tfoot的做用
http://www.w3school.com.cn/tags/tag_table.asp HTML <table> 標籤
http://blog.csdn.net/nightelve/article/details/7957726 四個好看的CSS樣式表格
http://www.divcss5.com/wenji/w503.shtml CSS如何設置html table表格邊框樣式
http://www.divcss5.com/html/h380.shtml HTML Table tr td th表格標籤元素
http://www.divcss5.com/jiqiao/j470.shtml css table width表格寬度樣式設置定義技巧教程篇
http://blog.csdn.net/neoxuhaotian/article/details/6596280 HTML學習筆記(三)
http://www.ruanyifeng.com/blog/2009/05/html_table_mastering.html 精通HTML表格的使用
http://www.douban.com/group/topic/10207896/ html經常使用標記詳講(二)--Table
http://www.787866.com/835.html html中10個與表格(table)相關標籤
http://www.it118.org/specials/f27a38ab-a491-4669-bc47-108d9daed52c/fa512118-f79b-4693-958a-357e44086656.htm html中的表格(table)標籤詳解
http://www.cnblogs.com/xugang/archive/2010/08/11/1797305.html <table>標籤中比較少見的屬性和子標籤:
http://www.iteye.com/topic/560496 主題:十個最簡單實用的Table設計模板