Home > Article > Web Front-end > A comprehensive introduction to HTML table attributes

A comprehensive introduction to HTML table attributes

巴扎黑Original: 2017-08-10 10:50:482436browse

[Introduction] HTML tables are represented by f5d188ed2c074f8b944552db028f98a1. A table can be divided into many rows (rows), represented by a34de1251f0d9fe1e645927f19a896e8; each row can be divided into many cells (cells), represented by b6c5a531a458a2e790c1fd6421739d1c. These three Tags are the most commonly used Tags for creating tables. A table can be divided into many rows (rows), represented by a34de1251f0d9fe1e645927f19a896e8; each row can be divided into many cells (cells), represented by b6c5a531a458a2e790c1fd6421739d1c.

These three Tags are the most commonly used Tags for creating tables.

<html>
<body>

<p>
表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。
</p>

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

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

<h4>两行三列的表格</h4>
<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 attribute

By default, if the border of the table is not set, the table will not display the 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>

To display the border of the table, you can use the border attribute.

<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>

Header of the table

Use b4d429308760b6c2d20d6300079ed38e to indicate the header of the table, and the words in the header are displayed in bold .

<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>

Empty cells

If there is no content between the cells of the table b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf, then this Cell boundaries are not displayed, even though the entire table has boundary values set. To show the boundaries of this cell, insert a space character.

<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>

More examples

<html>
<body>

<h4>
这个表格有标题：
</h4>

<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>

This example demonstrates how to use 63bd76834ec05ac1f4c0ebbeaafb0994 to add a title to a table.

<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>

The above is the detailed content of A comprehensive introduction to HTML table attributes. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 explanation of drag events dragstart, drag and dragendNext article：HTML5 explanation of drag events dragstart, drag and dragend

See more

A comprehensive introduction to HTML table attributes

By default, if the border of the table is not set, the table will not display the border.

Use b4d429308760b6c2d20d6300079ed38e to indicate the header of the table, and the words in the header are displayed in bold .

If there is no content between the cells of the table b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf, then this Cell boundaries are not displayed, even though the entire table has boundary values ​​set. To show the boundaries of this cell, insert a space character.

This example demonstrates how to use 63bd76834ec05ac1f4c0ebbeaafb0994 to add a title to a table.

Related articles

If there is no content between the cells of the table b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf, then this Cell boundaries are not displayed, even though the entire table has boundary values set. To show the boundaries of this cell, insert a space character.