HTML表格-1.16HTML基礎(chǔ)教程

你可以使用 HTML 創(chuàng)建表格。

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、成都網(wǎng)站建設(shè)與策劃設(shè)計,興寧網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:興寧等地區(qū)。興寧做網(wǎng)站價格咨詢:13518219792

實例 表格 這個例子演示如何在 HTML 文檔中創(chuàng)建表格。 表格邊框 本例演示各種類型的表格邊框。

(可以在本頁底端找到更多實例。)

表格

表格由 <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>

在瀏覽器顯示如下:

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

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

<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>
表格的表頭

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

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

<table border="1"><tr><th>Heading</th><th>Another Heading</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>

在瀏覽器顯示如下:

Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
表格中的空單元格

在一些瀏覽器中,沒有內(nèi)容的表格單元顯示得不太好。如果某個單元格是空的(沒有內(nèi)容),瀏覽器可能無法顯示出這個單元格的邊框。

<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td></td><td>row 2, cell 2</td></tr></table>

瀏覽器可能會這樣顯示:

表格中的空單元格

注意:這個空的單元格的邊框沒有被顯示出來。為了避免這種情況,在空單元格中添加一個空格占位符,就可以將邊框顯示出來。

<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>&nbsp;</td><td>row 2, cell 2</td></tr></table>

在瀏覽器中顯示如下:

row 1, cell 1 row 1, cell 2   row 2, cell 2
更多實例 沒有邊框的表格 本例演示一個沒有邊框的表格。 表格中的表頭(Heading) 本例演示如何顯示表格表頭。 空單元格 本例展示如何使用 "&nbsp;" 處理沒有內(nèi)容的單元格。 帶有標(biāo)題的表格 本例演示一個帶標(biāo)題 (caption) 的表格 跨行或跨列的表格單元格 本例演示如何定義跨行或跨列的表格單元格。 表格內(nèi)的標(biāo)簽 本例演示如何顯示在不同的元素內(nèi)顯示元素。 單元格邊距(Cell padding) 本例演示如何使用 Cell padding 來創(chuàng)建單元格內(nèi)容與其邊框之間的空白。 單元格間距(Cell spacing) 本例演示如何使用 Cell spacing 增加單元格之間的距離。 向表格添加背景顏色或背景圖像 本例演示如何向表格添加背景。 向表格單元添加背景顏色或者背景圖像 本例演示如何向一個或者更多表格單元添加背景。 在表格單元中排列內(nèi)容 本例演示如何使用 "align" 屬性排列單元格內(nèi)容,以便創(chuàng)建一個美觀的表格。 框架(frame)屬性 本例演示如何使用 "frame" 屬性來控制圍繞表格的邊框。
表格標(biāo)簽 表格 描述 <table> 定義表格 <caption> 定義表格標(biāo)題。 <th> 定義表格的表頭。 <tr> 定義表格的行。 <td> 定義表格單元。 <thead> 定義表格的頁眉。 <tbody> 定義表格的主體。 <tfoot> 定義表格的頁腳。 <col> 定義用于表格列的屬性。 <colgroup> 定義表格列的組。

分享題目:HTML表格-1.16HTML基礎(chǔ)教程
瀏覽路徑:http://www.muchs.cn/article30/dghhdso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、App設(shè)計、網(wǎng)站建設(shè)、小程序開發(fā)、網(wǎng)站維護(hù)、網(wǎng)站內(nèi)鏈

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

小程序開發(fā)