HTML表格屬性介紹

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

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

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

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

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

<html>
<body>

<p>
表格所用到的Tag：整個表格開始要用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這個屬性。

<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)容，那么這個單元格的邊界是不會被顯示出來的，盡管整個表格已設(shè)置邊界值。要顯示這個單元格的邊界，可以插入一個 空格符。

<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>上面的表格中，有一個單元格里是沒有任何內(nèi)容的，這個空的單元格沒有顯示邊界，雖然整個表格設(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>
上面的例子，你可以看到，給這個單元格加上一個空格符號之后，單元格的邊界就顯示出來了。</p>
<p>注意：空格符要用&bsp;表示。&nbsp;是一個HTML特別字符，參見HTML特別字符(HTML Character Entities)。
</p>

</body>
</html>

更多示例

<html>
<body>

<h5>
這個表格有標題：
</h5>

<table border="6">
<caption>表格標題</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>

這個示例演示如何用<caption>在一個表格上加上標題。

<html>
<body>

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

</body>
</html>

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

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

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

聲明：本網(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)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

HTML表格屬性介紹

border屬性

表格的表頭

空的單元格

更多示例