關於table的一些記錄

HTML有10個表格相關標籤

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

1、<thead> 、<tbody> 、<tfoot>

<thead> 、<tbody> 、<tfoot> 標記。它們分別表示表格的表頭,表正文,表腳。在打印網頁內容的時候,若是表格很大,一頁打印不完,<thead>和<tfoot>將在每一頁出現(注意:在IE 中無效,但在 Firefox 有效)。

tbody的特色:

爲了讓大表格(table)在下載的時候能夠分段的顯示,就是說在瀏覽器解析HTML時,table是做爲一個總體解釋的,使用tbody能夠優化顯示。若是表格很長,用tbody分段,能夠一部分一部分地顯示,不用等整個表格都下載完成。下載一塊顯示一塊,表格巨大時有比較好的效果。tbody包含行的內容下載完優先顯示,沒必要等待表格結束。另外,還須要注意一個地方。表格行原本是從上向下顯示的。可是,應用了thead/tbody/tfoot之後,就「從頭到腳」顯示,無論你的行代碼順序如何。也就是說若是thead寫在了tbody的後面,html顯示時,仍是以先thead後tbody顯示。

三個注意點:
  1. thead和tfoot在一張表中都只能有一個,而tbody能夠有多個
  2. tfoot必須出如今tbody前面,這樣瀏覽器在接收主體數據以前,就能渲染表尾,有利於加快表格的顯示速度。這一點對大型表格尤爲重要
  3. thead、tbody和tfoot裏面都必須使用tr標籤

2、<caption>

在將caption的align屬性設置爲left的時候,各個瀏覽器表現出的樣式各不相同

 firefox  chrome IE6 7 8 IE9
safari      
     

3、<colgroup>

在將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
above
below
hsides
lhs
rhs
vsides
box
border

規定外側邊框的哪一個部分是可見的

 rules

none
groups
rows
cols
all

規定內側邊框的哪一個部分是可見的

 width

%
pixels

規定表格的寬度

 summary

text

規定表格的摘要。用於歸納整個表格的內容。它對於搜索引擎的機器人記錄信息十分重要。摘要是不會顯示出來的,給一些其它的工具使用的,好比盲人閱讀器等。

 bordercolor

 

rgb(x,x,x)

 

#xxxxxx

 

colorname

 

設置表格邊框的顏色。但它在不一樣的瀏覽器下顯示的效果不一致。(不推薦使用bordercolor 屬性,而推薦使用CSS 樣式表的border 屬性來進行設置)

一、cellspacing

cellspacing在大部分瀏覽器中與style中的border-spacing效果相同,但在IE6 7中略有不一樣

IE6 7 cellspacing=0 IE6 7 border-spacing=0

二、css中的border-collapse

css中的border-collapse:collapse | separate 能夠設置表格的邊框是否被合併成一個邊框。將設置爲border-collapse:collapse後,各個瀏覽器顯示各不相同

 firefox chrome  IE6 7 8  IE9
       
 safari      
       

三、<th> <td>中的scope

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>

四、frame , rules

frame常見屬性
屬性值 說明
above 顯示上邊框
border 顯示上下左右邊框
below 顯示下邊框
hsides 顯示上下邊框
lhs 顯示左邊框
rhs 顯示右邊框
void 不顯示邊框
vsides 顯示左右邊框

 

rules常見屬性
屬性值 說明
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    
   

五、CSS中的table-layout

用來指定表格顯示的樣式

table { table-layout: fixed } 
* auto(缺省)
* fixed
* inherit

  auto表示單元格的大小由內容決定。fixed表示單元格的大小是固定的,由第一個指定大小的單元格決定;若是全部單元格都沒有指定大小,則由第一個單元格的默認大小決定;若是單元格中的內容超出單元格的大小,則用CSS中的overflow命令控制。微軟公司聲稱使用這個命令,表格的顯示速度能夠加快100倍。爲了加快表格顯示,最好事先就在CSS(或者table標籤的width和height屬性)中指定表格的寬度和高度。

六、跨行rowspan 跨列colspan

熟練掌握表格的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>

通過CSS潤色後的table

發揮你的想象力,玩轉table

 

附加中保存的是示例的html代碼

table.rar

也能夠進入頁面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設計模板

相關文章
相關標籤/搜索