HTML 테이블 속성에 대한 포괄적인 소개-H5 튜토리얼-php.cn

[소개] HTML 테이블은

로 표현됩니다. 테이블은 로 표시되는 많은 행(행)으로 분할될 수 있으며, 각 행은

로 표시되는 많은 셀(셀)로 분할될 수 있습니다. 이 세 가지 태그는 테이블 생성에 가장 일반적으로 사용되는 태그입니다.

테이블에 사용되는 태그: 테이블은 전체 테이블의 시작 부분에 사용되어야 합니다. 각 HTML 테이블은

로 표시되어야 합니다. 테이블은 로 표시되는 많은 행(행)으로 분할될 수 있으며, 각 행은 사이에 내용이 없으면 전체 테이블이 경계 값으로 설정되어 있어도 이 셀의 테두리는 표시되지 않습니다. . 이 셀의 경계를 표시하려면 공백 문자를 삽입하세요.

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

로그인 후 복사

예제 더보기

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

로그인 후 복사

이 예에서는

로 표시되는 많은 셀(셀)로 분할될 수 있습니다.

이 세 가지 태그는 테이블 생성에 가장 일반적으로 사용되는 태그입니다.

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

기본적으로 테이블 테두리가 설정되지 않은 경우 테이블에는 테두리가 표시되지 않습니다.

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

로그인 후 복사

테이블의 테두리를 표시하려면 테두리 속성을 사용하면 됩니다.

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

로그인 후 복사

빈 셀