全方位介紹HTML表格屬性-H5教程-PHP中文網

border屬性

表格的表頭

空的儲存格

更多範例

首頁

web前端

H5教程

全方位介紹HTML表格屬性

巴扎黑

Aug 10, 2017 am 10:50 AM

html 屬性

[導讀] HTML表格用

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

表示。這三個Tag是建立表格最常用的Tag。

表格所用的Tag：整個表格開始要用table；每個

HTML表格用

表示。一個表格可以分成很多行(row)，用表示；每行又可以分成很多單元格(cell)，用之間沒有內容，那麼這個單元格的邊界是不會被顯示出來的，儘管整個表格已設定邊界值。要顯示這個儲存格的邊界，可以插入一個空格符。

<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>上面的表格中，有一个单元格里是没有任何内容的，这个空的单元格没有显示边界，虽然整个表格设了边界值。</p>

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

<p>
上面的例子，你可以看到，给这个单元格加上一个空格符号之后，单元格的边界就显示出来了。</p>
<p>注意：空格符要用&bsp;表示。 是一个HTML特别字符，参见HTML特别字符(HTML Character Entities)。
</p>

</body>
</html>

登入後複製

border屬性

在預設情況下，如果不設定表格的邊界，表格是不顯示邊界的。

<html>
<body>

<h4>缺省情况下，表格没有边界。</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

<h4>表格Border设为0，也不显示边界：</h4>
<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>

<h4>表格的边界值设为1：</h4>
<table border="1">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>

<h4>表格的边界值设为8，边界更粗：</h4>
<table border="8">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>

<h4>表格的边界值设为15，边界更粗：</h4>
<table border="15">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td></tr>
</table>

</body>
</html>

登入後複製

表格的表頭

用

來表示表格的表頭，表頭的字是粗體顯示的。

<html>
<body>

<h4>有表头的表格：</h4>
<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>

<h4>竖直方向的表头：</h4>
<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>

登入後複製

空的儲存格

如果表格的儲存格

在一個表格上加上標題。

<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表格屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn