【HTML 教程】表格標(biāo)簽

作者 | 阮一峰

表格（table）以行（row）和列（column）的形式展示數(shù)據(jù)。

1、，

<strong id="7actg"></strong>

是一個(gè)塊級(jí)容器標(biāo)簽，所有表格內(nèi)容都要放在這個(gè)標(biāo)簽里面。

<table>
  ... ...
table>

總是里面的第一個(gè)子元素，表示表格的標(biāo)題。該元素是可選的。

<table>
  <caption>示例表格caption>
table>

2、

、、

、、都是塊級(jí)容器元素，且都是的一級(jí)子元素，分別表示表頭、表體和表尾。

<table>
  <thead>... ...thead>
  <tbody>... ...tbody>
  <tfoot>... ...tfoot>
table>

這三個(gè)元素都是可選的。如果使用了

，那么和一定在的后面。如果使用了，那么一定在后面。

大型表格內(nèi)部可以使用多個(gè)

，表示連續(xù)的多個(gè)部分。

3、

，

是的一級(jí)子元素，用來包含一組列的定義。是的子元素，用來定義表格的一列。

<table>
  <colgroup>
    <col>
    <col>
    <col>
  colgroup>
table>

上面代碼表明表格有3列。

不僅是一個(gè)單獨(dú)使用的標(biāo)簽，沒有結(jié)束標(biāo)志，而且還是一個(gè)空元素，沒有子元素。它的主要作用，除了申明表格結(jié)構(gòu)，還可以為表格附加樣式。

<table>
  <colgroup>
    <col class="c1">
    <col class="c2">
    <col class="c3">
  colgroup>
  <tr>
    <td>1td>
    <td>2td>
    <td>3td>
  tr>
table>

上面代碼中，

聲明表格有三列，每一列有自己的 class，可以使用 CSS 針對(duì)每個(gè) class 設(shè)定樣式，會(huì)對(duì)整個(gè)表格生效。

有一個(gè)span屬性，值為正整數(shù)，默認(rèn)為1。如果大于1，就表示該列的寬度包含連續(xù)的多列。

<table>
  <colgroup>
    <col>
    <col span="2">
    <col>
  colgroup>
table>

上面代碼中，表格的表頭定義了3列，實(shí)際數(shù)據(jù)有4列。表頭的第2列會(huì)連續(xù)跨2列。

4、

標(biāo)簽表示表格的一行（table row）。如果表格有、、，那么就放在這些容器元素之中，否則直接放在的下一級(jí)。

<table>
  <tr>...tr>
  <tr>...tr>
  <tr>...tr>
table>

上面代碼表示表格共有3行。

5、

，		和	都用來定義表格的單元格。其中，	是標(biāo)題單元格，	是數(shù)據(jù)單元格。 <table> <tr> <th>學(xué)號(hào)th><th>姓名th> tr> <tr> <td>001td><td>張三td> tr> <tr> <td>002td><td>李四td> tr> table> 上面代碼中，表格一共有三行。第一行是標(biāo)題行，所以使用	；第二行和第三行是數(shù)據(jù)行，所以使用	。 （1）colspan屬性，rowspan屬性 單元格會(huì)有跨越多行或多列的情況，這要通過colspan屬性和rowspan屬性設(shè)置，前者表示單元格跨越的欄數(shù)，后者表示單元格跨越的行數(shù)。它們的值都是一個(gè)非負(fù)整數(shù)，默認(rèn)為1。 <table> <tr> <td colspan="2">Atd><td>Btd> tr> <tr> <td>Atd><td>Btd><td>Ctd> tr> table> 上面代碼中，第一行的第一個(gè)單元格會(huì)跨兩列。 （2）headers屬性 如果表格很大，單元格很多，源碼里面會(huì)看不清，哪個(gè)單元格對(duì)應(yīng)哪個(gè)表頭，這時(shí)就可以使用headers屬性。 <table> <tr> <th id="no">學(xué)號(hào)th><th id="names">姓名th> tr> <tr> <td headers="no">001td><td headers="names">張三td> tr> <tr> <td headers="no">002td><td headers="names">李四td> tr> table> 上面代碼中，標(biāo)題欄的	設(shè)置了id屬性，后面的	單元格的headers屬性就對(duì)應(yīng)這些id屬性的值，因此就能看出來這些單元格對(duì)應(yīng)哪個(gè)標(biāo)題欄。 headers屬性的值總是對(duì)應(yīng)	標(biāo)簽的id屬性的值。由于一個(gè)單元格可以對(duì)應(yīng)多個(gè)標(biāo)題欄（跨行的情況），所以headers屬性可以是一個(gè)空格分隔的字符串，對(duì)應(yīng)多個(gè)id屬性的值。 （3）scope屬性 scope屬性只有	標(biāo)簽支持，一般不在	標(biāo)簽使用，表示該	單元格到底是欄的標(biāo)題，還是列的標(biāo)題。 <table> <tr> <th scope="col">姓名th> <th scope="col">學(xué)號(hào)th> <th scope="col">性別th> tr> <tr> <th scope="row">張三th> <td>001td> <td>男td> tr> <tr> <th scope="row">李四th> <td>002td> <td>男td> tr> table> 上面代碼中，第一行的標(biāo)題欄都是列標(biāo)題，所以	的scope屬性為col，第二行和第三行的第一列是行標(biāo)題，所以	標(biāo)簽的scope屬性為row。 scope屬性可以取下面這些值。 row：該行的所有單元格，都與該標(biāo)題單元格相關(guān)。 col：該列的所有單元格，都與該標(biāo)題單元格相關(guān)。 rowgroup：多行組成的一個(gè)行組的所有單元格，都與該標(biāo)題單元格相關(guān)，可以與rowspan屬性配合使用。 colgroup：多列組成的一個(gè)列組的所有單元格，都與該標(biāo)題單元格相關(guān)，可以與colspan屬性配合使用。 auto：默認(rèn)值，表示由瀏覽器自行決定。 下面是一個(gè)colgroup屬性和rowgroup屬性的例子。 <table> <thead> <tr> <th scope="col">海報(bào)名稱th> <th scope="col">顏色th> <th colspan="3" scope="colgroup">尺寸th> tr> thead> <tbody> <tr> <th rowspan="3" scope="rowgroup">Zodiacth> <th scope="row">Full colorth> <td>A2td> <td>A3td> <td>A4td> tr> <tr> <th scope="row">Black and whiteth> <td>A1td> <td>A2td> <td>A3td> tr> <tr> <th scope="row">Sepiath> <td>A3td> <td>A4td> <td>A5td> tr> tbody> table> 上面的例子中，列標(biāo)題“尺寸”的scope屬性為colgroup，表示這個(gè)標(biāo)題單元格對(duì)應(yīng)多列（本例為3列）；行標(biāo)題的scope屬性為rowgroup，表示這個(gè)標(biāo)題單元格對(duì)應(yīng)多行（本例為2行）。 本文完~ 瀏覽 36 點(diǎn)贊 評(píng)論 收藏 分享 手機(jī)掃一掃分享 分享 舉報(bào) 評(píng)論 圖片 表情 視頻 評(píng)價(jià) 全部評(píng)論 推薦 【HTML 教程】表單標(biāo)簽 web前端開發(fā) 0 【HTML 教程】其他標(biāo)簽 web前端開發(fā) 0 HTML meta 標(biāo)簽詳解 JavaScript之禪 0 【HTML 教程】iframe web前端開發(fā) 0 WebJMXJSP表格標(biāo)簽庫(kù) WebJMX標(biāo)簽庫(kù)項(xiàng)目可以控制你的JMX接口。WebJMX這個(gè)標(biāo)簽庫(kù)項(xiàng)目的目的是生成一個(gè)JSP標(biāo)簽庫(kù)，可以讓有技巧的JSP開發(fā)人員為JMX生成一個(gè)可定制的、規(guī)范的、基于Web的界面。 eXtremeTableJSP表格標(biāo)簽庫(kù) eXtremeTable是一個(gè)可擴(kuò)展的用于以表格的形式來顯示數(shù)據(jù)的一組JSP標(biāo)簽庫(kù).代碼有如：?<ec:table??items="presidents"??action="${pageCont eXtremeTableJSP表格標(biāo)簽庫(kù) eXtremeTable是一個(gè)可擴(kuò)展的用于以表格的形式來顯示數(shù)據(jù)的一組JSP標(biāo)簽庫(kù).代碼有如：?&l 【HTML】meta 標(biāo)簽到底是做什么的 前端自習(xí)課 0 AutoEmbed多媒體HTML標(biāo)簽生成類 AutoEmbed是一個(gè)PHP的類，用來生成在頁(yè)面上嵌入音頻和視頻（包括Flash動(dòng)畫）的HTML標(biāo)簽。 AutoEmbed多媒體HTML標(biāo)簽生成類 AutoEmbed 是一個(gè)PHP的類，用來生成在頁(yè)面上嵌入音頻和視頻（包括Flash動(dòng)畫）的HTML 點(diǎn)贊 評(píng)論 收藏 分享 手機(jī)掃一掃分享 分享 舉報(bào)

<table id="7actg"></table>

<address id="7actg"></address>

<address id="7actg"></address>

<object id="7actg"><tt id="7actg"></tt></object>