html表格学习

时间 2020-01-18

标签 html 表格学习栏目 HTML 繁體版

原文原文链接

html里表格由 <table> 标签来定义。每一个表格均有若干行（由 <tr> 标签订义），每行被分割为若干单元格（由 <td> 标签订义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格能够包含文本、图片、列表、段落、表单、水平线、表格等等。html

表格的编写：浏览器

<table border="1px">
<tr>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
</tr>
</table>

若是不定义边框属性，表格将不显示边框；ide

表格的表头使用 <th> 标签进行定义。spa

大多数浏览器会把表头显示为粗体居中的文本：orm

<table border="1">
<tr>
<th>1</th>
<th>2/th>
</tr>

在一些浏览器中，没有内容的表格单元显示得不太好。若是某个单元格是空的（没有内容），浏览器可能没法显示出这个单元格的边框；为了不这种状况，在空单元格中添加一个空格占位符，就能够将边框显示出来。例：htm

<td></td>红色为空格占位符

下面是几个表格标签：
图片

表格	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<col>	定义用于表格列的属性。
<colgroup>	定义表格列的组

<html>get

<body>
it

<h4>横跨两列的单元格：</h4>
io

<tr>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

<h4>横跨两行的单元格：</h4>

<tr>

<td>Bill Gates</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

表头的显示：

<html>

<body>

<tr>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

<h4>垂直的表头：</h4>

<tr>

<td>Bill Gates</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>