HTML表格屬性介紹

本篇內(nèi)容介紹了“HTML表格屬性介紹”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺(tái)小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了青神免費(fèi)建站歡迎大家使用！

[導(dǎo)讀] HTML表格用<table>表示。一個(gè)表格可以分成很多行(row)，用<tr>表示；每行又可以分成很多單元格(cell)，用<td>表示。這三個(gè)Tag是創(chuàng)建表格最常用的Tag。<html><body><p>表格所用到的Tag：整個(gè)表格開始要用table；每

HTML表格用<table>表示。一個(gè)表格可以分成很多行(row)，用<tr>表示；每行又可以分成很多單元格(cell)，用<td>表示。

這三個(gè)Tag是創(chuàng)建表格最常用的Tag。

<html>
<body>

<p>
表格所用到的Tag：整個(gè)表格開始要用table；每一行開始要用tr；每一單元格開始要用td。
</p>

<h5>只有一行(Row)一列(Column)的表格</h5>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>

<h5>一行三列的表格</h5>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<h5>兩行三列的表格</h5>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>

border屬性

在缺省情況下，如果不設(shè)置表格的邊界，表格是不顯示邊界的。

<html>
<body>

<h5>缺省情況下，表格沒有邊界。</h5>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

<h5>表格Border設(shè)為0，也不顯示邊界：</h5>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>

要顯示表格的邊界，可使用border這個(gè)屬性。

<html>
<body>

<h5>表格的邊界值設(shè)為1：</h5>
<table border="1">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>

<h5>表格的邊界值設(shè)為8，邊界更粗：</h5>
<table border="8">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>

<h5>表格的邊界值設(shè)為15，邊界更粗：</h5>
<table border="15">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td></tr>
</table>

</body>
</html>

表格的表頭

用<th>來表示表格的表頭，表頭的字是粗體顯示的。

<html>
<body>

<h5>有表頭的表格：</h5>
<table border="1">
<tr>
<th>姓名</th>
<th>電話</th>
<th>傳真</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h5>豎直方向的表頭：</h5>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>電話</th>
<td>555 77 854</td>
</tr>
<tr>
<th>傳真</th>
<td>555 77 855</td>
</tr>
</table>

</body>
</html>

空的單元格

如果表格的單元格<td></td>之間沒有內(nèi)容，那么這個(gè)單元格的邊界是不會(huì)被顯示出來的，盡管整個(gè)表格已設(shè)置邊界值。要顯示這個(gè)單元格的邊界，可以插入一個(gè)&nbsp;空格符。

<html>
<body>

<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>

<p>上面的表格中，有一個(gè)單元格里是沒有任何內(nèi)容的，這個(gè)空的單元格沒有顯示邊界，雖然整個(gè)表格設(shè)了邊界值。</p>

<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Some text</td>
</tr>
</table>

<p>
上面的例子，你可以看到，給這個(gè)單元格加上一個(gè)空格符號(hào)之后，單元格的邊界就顯示出來了。</p>
<p>注意：空格符要用&bsp;表示。&nbsp;是一個(gè)HTML特別字符，參見HTML特別字符(HTML Character Entities)。
</p>

</body>
</html>

更多示例

<html>
<body>

<h5>
這個(gè)表格有標(biāo)題：
</h5>

<table border="6">
<caption>表格標(biāo)題</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>

這個(gè)示例演示如何用<caption>在一個(gè)表格上加上標(biāo)題。

<html>
<body>

<table border="1">
<tr>
<td>
<p>這是一段</p>
<p>這是另外一段。</p>
</td>
<td>這個(gè)單元格里包含了一個(gè)表格：
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>這個(gè)單元格里包含了一個(gè)圖片：
<img src = "../images/html_tutorials/mail.gif">
</td>
<td>HELLO</td>
</tr>
</table>

</body>
</html>

“HTML表格屬性介紹”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

新聞標(biāo)題：HTML表格屬性介紹
網(wǎng)站地址：http://bm7419.com/article48/ijhdhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、品牌網(wǎng)站制作、App開發(fā)、網(wǎng)站設(shè)計(jì)、虛擬主機(jī)

廣告

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

成都網(wǎng)頁(yè)設(shè)計(jì)公司