關於table的一些記錄

時間 2019-12-06

標籤關於 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顯示。

三個注意點：

thead和tfoot在一張表中都只能有一個，而tbody能夠有多個
tfoot必須出如今tbody前面，這樣瀏覽器在接收主體數據以前，就能渲染表尾，有利於加快表格的顯示速度。這一點對大型表格尤爲重要
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>