建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
HTML 表格
HTML 表格實(shí)例
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| Adam | Johnson | 67 |
在線(xiàn)實(shí)例
表格
這個(gè)例子演示如何在 HTML 文檔中創(chuàng)建表格。
（可以在本頁(yè)底端找到更多實(shí)例。）
HTML 表格
表格由 HTML 表格的基本結(jié)構(gòu)： 標(biāo)簽來(lái)定義。每個(gè)表格均有若干行（由
標(biāo)簽定義），每行被分割為若干單元格（由 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線(xiàn)、表格等等。 …
… … … 表格實(shí)例
實(shí)例
row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
嘗試一下 ?
在瀏覽器顯示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
HTML 表格和邊框?qū)傩?/h2>
如果不定義邊框?qū)傩裕砀駥⒉伙@示邊框。有時(shí)這很有用，但是大多數(shù)時(shí)候，我們希望顯示邊框。
使用邊框?qū)傩?code>border來(lái)顯示一個(gè)帶有邊框的表格：
實(shí)例
嘗試一下 ?
HTML 表格表頭單元格
表格的表頭單元格使用 表格的表頭單元格屬性主要是一些公共屬性，如： 大多數(shù)瀏覽器會(huì)把表頭顯示為粗體居中的文本：標(biāo)簽進(jìn)行定義。 align、dir、width、height。 實(shí)例
Header 1 Header 2
嘗試一下 ?
在瀏覽器顯示如下：
| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
表格標(biāo)題
在 注：此標(biāo)簽在較新版本的HTML / XHTML中已棄用標(biāo)簽中我們可以使用
實(shí)例
row 1, column 1 row 1, columnn 2 row 2, column 1 row 2, columnn 2
嘗試一下 ?
HTML 表格高度和寬度
在標(biāo)簽中您可以使用
width（寬）和height（高）屬性設(shè)置表格寬度和高度。您可以按像素或可用屏幕區(qū)域的百分比來(lái)指定表格寬度或高度。實(shí)例
Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2
嘗試一下 ?
HTML 表格背景
您可以使用以下方法之一設(shè)置 HTML 表格的背景
bgcolor屬性 - 可以為整個(gè)表格或僅為一個(gè)單元格設(shè)置背景顏色。background屬性 - 可以為整個(gè)表設(shè)置背景圖像或僅為一個(gè)單元設(shè)置背景圖像。bordercolor屬性 - 可以設(shè)置邊框顏色。
注：HTML5 中不推薦使用
bgcolor，background和bordercolor屬性。不要使用這些屬性。
實(shí)例
嘗試一下 ?
使用background屬性需要提供圖像 URL 地址：
實(shí)例
嘗試一下 ?
HTML 表格空間
有以下兩個(gè)屬性，用于調(diào)整 HTML 表格中單元格的空間：
cellspacing屬性-定義表格單元格之間的空間cellpadding屬性-表示單元格邊框與單元格內(nèi)容之間的距離
實(shí)例
嘗試一下 ?
HTML 合并單元格
- 如果要將兩個(gè)或多個(gè)列合并為一個(gè)列，將使用
colspan屬性 - 如果要合并兩行或更多行，則將使用
rowspan屬性。
實(shí)例
嘗試一下 ?
效果如下：
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
| Row 2 Cell 2 | Row 2 Cell 3 | |
| Row 3 Cell 1 | ||
HTML 表格頭部、主體、頁(yè)腳
表格可以分為三個(gè)部分 - 頭部，主體和頁(yè)腳，如同word 文檔中頁(yè)面的頁(yè)眉、正文、頁(yè)腳。每個(gè)頁(yè)面保持相同，而正文是表格的主要內(nèi)容持有者。
頭部，主體和頁(yè)腳的對(duì)應(yīng)的三個(gè)標(biāo)簽是：
- 創(chuàng)建單獨(dú)的表頭。- 表示表格的主體。- 創(chuàng)建一個(gè)單獨(dú)的表頁(yè)腳。表可以包含多個(gè)
元素以指示不同的頁(yè)面。但值得注意的是
和標(biāo)簽應(yīng)出現(xiàn)在之前：實(shí)例
Cell 1 Cell 2 Cell 3 Cell 4 嘗試一下 ?
HTML 表格的嵌套
您可以在另一個(gè)表中使用一個(gè)表。可以使用
內(nèi)的幾乎所有標(biāo)簽。
實(shí)例
Name Salary 其琛 5000 曼迪 7000 嘗試一下 ?
更多實(shí)例
沒(méi)有邊框的表格
本例演示一個(gè)沒(méi)有邊框的表格。表格中的表頭 ( Heading )
本例演示如何顯示表格表頭。帶有標(biāo)題的表格
本例演示一個(gè)帶標(biāo)題 ( caption ) 的表格跨行或跨列的表格單元格
本例演示如何定義跨行或跨列的表格單元格。表格內(nèi)的標(biāo)簽
本例演示如何顯示在不同的元素內(nèi)顯示元素。單元格邊距 ( Cell padding )
本例演示如何使用 Cell padding 來(lái)創(chuàng)建單元格內(nèi)容與其邊框之間的空白。單元格間距 ( Cell spacing )
本例演示如何使用 Cell spacing 增加單元格之間的距離。HTML 表格標(biāo)簽
標(biāo)簽 描述 定義表格 定義表格的表頭 定義表格的行 定義表格單元 定義表格標(biāo)題 定義表格列的組 定義用于表格列的屬性 定義表格的頁(yè)眉 定義表格的主體 定義表格的頁(yè)腳
分享題目：創(chuàng)新互聯(lián)HTML教程：HTML表格
URL地址：http://www.5511xx.com/article/ccssiis.html其他資訊
公司名稱(chēng)：四川綿陽(yáng)平武網(wǎng)站建設(shè)工作室 聯(lián)系電話(huà)：18980820575
網(wǎng)站備案號(hào)：蜀ICP備2024061352號(hào)-3
四川平武建站 四川平武網(wǎng)站建設(shè) 四川平武網(wǎng)站設(shè)計(jì) 四川平武網(wǎng)站制作 成都做網(wǎng)站