<div style="">
 <div id="div1">
 <table >
 
 </table>
 </div>
 <div id="div2">
 <table style="width:12900px;">
 
 </table>
 </div>
 <div id="div3">
 <table>
 
 </table>
 </div>
 <div id="div4">
 <table id="table1" style="width:12900px;">
 
 </table>
 </div>
</div>
<script>
 $('#table1').parent("div").each(function () {
 $(this).data({sl: this.scrollLeft, st: this.scrollTop});
 }).scroll(function () {
 var sl = this.scrollLeft, st = this.scrollTop;
 $("#div2").scrollLeft(sl);
 $("#div3").scrollTop(st);
 });
</script>

TML 表格

HTML 表格實例:

HTML 表格

表格由 <table> 標(biāo)簽來定義。每個表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

表格實例

實例

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

在瀏覽器顯示如下：:

HTML 表格和邊框?qū)傩?/h1>

如果不定義邊框?qū)傩?，表格將不顯示邊框。有時這很有用，但是大多數(shù)時候，我們希望顯示邊框。

使用邊框?qū)傩詠盹@示一個帶有邊框的表格：

實例

<table border="1">

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

---

HTML 表格表頭

表格的表頭使用 <th> 標(biāo)簽進行定義。

大多數(shù)瀏覽器會把表頭顯示為粗體居中的文本：

實例

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

在瀏覽器顯示如下：

HTML 表格標(biāo)簽

加表格頭部信息與腳部信息

昨天我們在《使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作》（文章結(jié)尾有目錄）中學(xué)習(xí)了如何向網(wǎng)頁中添加基礎(chǔ)表格，今天我們來學(xué)習(xí)如何為基礎(chǔ)表格添加表頭和表腳信息。先看看效果吧。

老規(guī)矩，先介紹表頭和表腳的標(biāo)簽。

表頭：<thead></thead>

這個標(biāo)簽只是告訴頁面這里是表頭，如果添加文字的話還需要<tr></tr>列標(biāo)簽和<td></td>行標(biāo)簽。

如果要添加表頭的話，直接在代碼中添加這個標(biāo)簽是不行的，我們還需要將其他表格內(nèi)容放置到<tbody></tbody>中，這樣html才能知道哪里是表格內(nèi)容，哪里是表頭內(nèi)容。

示例代碼如下所示：

<table border = "1" width = "100%">
  <thead><!--表頭開始標(biāo)簽-->
  <tr>
  <td>表格的頭部信息</td>
</tr>
</thead><!--表頭結(jié)束標(biāo)簽--><tbody><!--表格內(nèi)容開始標(biāo)簽-->
<caption>表格標(biāo)題</caption>
<tr>
  <th>姓名</th>
<th>年齡</th>
</tr>
<tr>
  <td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
  <td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody><!--表格內(nèi)容結(jié)束標(biāo)簽-->
</table>

代碼效果如圖：

大家通過觀察發(fā)現(xiàn)，表格的標(biāo)題標(biāo)簽<caption></caption>雖然寫在<tbody></tbody>里面，但是顯示的時候，卻一直在表格的最上面。

合并單元格操作：我們希望表頭信息能夠在表格中獨占一列，這樣就需要介紹如何修改<td></td>行標(biāo)簽中的colspan屬性。

示例代碼如下：

<thead>
  <!--表頭開始標(biāo)簽--><tr><td colspan = "2">表格的頭部信息</td></tr></thead><!--表頭結(jié)束標(biāo)簽-->

修改后效果如下：

colspan的意思就是"列合并"，col是column（列、縱隊）的縮寫，span是跨度的意思。

colspan就是為<td></td>列標(biāo)簽指定跨越幾個列向單元格。

這里我們要合并兩個，故colspan="2"，2一定要用半角引號引起來！

那合并行單元格的屬性是什么呢？其實反推一下也能猜出。行的英文是row，因此rowspan就是"行合并"。

代碼示例如下：我們把"一行一列"和"二行一列"縱向合并。

<tr>
  <td rowspan = "2">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列二行</td>
</tr>

效果如圖所示：

大家注意，如果您合并成了"一行一列"，那就要把"二列一行"刪掉。

最后，我們來寫一下表格的腳部信息。

腳部標(biāo)簽如下：<tfoot></tfoot>

使用方法和<thead></thead>一樣，在中間添加列行標(biāo)簽來顯示內(nèi)容。

同時也要給<td></td>行標(biāo)簽進行列向合并單元格，即添加colspan="2"。

示例代碼如下：

<tfoot><tr><td colspan = "2">表格的腳部信息</td></tr></tfoot>

值得注意的是：這塊代碼的位置在<thead></thead>之后，<tbody></tbody>之前。

示例代碼如下：

<table border = "1" width = "100%">
  <thead>
  <tr>
  <td colspan = "2">表格的頭部信息</td>
</tr>
</thead>
<tfoot>
    <tr>
    <td colspan = "2">表格的腳部信息</td>
</tr>
</tfoot>
<tbody>
<caption>表格標(biāo)題</caption>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td rowspan = "2">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列二行</td>
</tr>
</tbody>
</table>

頁面效果如下：

今天的內(nèi)容結(jié)束了。明天我們繼續(xù)講解列表元素的其他屬性。

喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作