テーブルの基本構造:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!--
table 为表格
tr/th 行
td 列(每一个单元格)
-->
<tr> </tr>
:テーブルの行<td> </td>
:テーブルの各行は、<td></td>
タグで定義されたいくつかのセルに分割されています。(Tdはテーブルデータ、テーブルデータを指します)
<table border="1"><!--如果不定义边框属性,表格将不显示边框-->
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
表示効果:
<th> </th>
ラベルはテーブルのヘッダーであり、太字で水平方向に中央に配置されたテキストとして理解されます。<td>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th><!-- 表头-->
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
テーブルのプロパティ:
- width = "テーブルの幅"
- height = "テーブルの高さ"
- border = "テーブルの境界線"
- bordercolor = "ボーダーカラー"
- cellspacing = "セル間の間隔"
- cellpadding = "セルとコンテンツの間の距離"
- セル属性のマージ:(td)
列のマージ:colspan = "マージするセルの列の数"
行のマージ:rowspan = "マージするセルの行の数" - 8. align = "テーブルの水平方向の配置"値:左、右、中央、valign = "垂直方向の配置"
top \ bottom \ middle
関連する演習:
<table border="1px" width="360px" height="100px" cellspacing="0px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td colspan="2">3</td>
</tr>
</table>
<table border="1px" width="360px" height="100px" cellspacing="0px">
<tr>
<td rowspan="2">a</td><!-- 合并行 -->
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
</table>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格练习</title>
</head>
<body>
<table border="1px" cellspacing="0">
<col width="100px" > <!-- 第一列宽度 -->
<col width="100px" > <!-- 第二列宽度 -->
<col width="100px" > <!-- 第三列宽度 -->
<col width="100px" > <!-- 第四列宽度 -->
<col width="100px" > <!-- 第五列宽度 -->
<col width="100px" > <!-- 第六列宽度 -->
<col width="200px" > <!-- 第七列宽度 -->
<tr height="50px" align="center">
<th colspan="7"> 个人简历</th>
</tr>
<tr height="50px" align="center">
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4">照片</td><!-- 行合并 占四行位置 -->
</tr>
<tr height="50px" align="center">
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td>
<!-- <td></td> 做行合并时删除-->
</tr>
<tr height="50px" align="center">
<td>电话</td>
<td></td>
<td >政治面貌</td>
<td colspan="3"></td>
<!-- <td></td> 做行合并时删除-->
</tr>
<tr height="50px" align="center">
<td>毕业院校</td>
<td colspan="5"></td>
<!-- <td></td> 做行合并时删除-->
</tr>
<tr height="50px" align="center">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
<table border="px" bordercolor="#ffa500" width="1700px" height="975px" cellspacing="0px"
style="text-align: center;font-size:30px;border-collapse: collapse;">
<col width="202px">
<tr>
<!-- 1 -->
<th colspan="5" >逆战班学员介绍</th>
</tr>
<tr>
<!-- 2 -->
<td>您的大名</td>
<td width="404px"></td>
<td width="200px">贵庚</td>
<td width="404px"></td>
<td rowspan="5"></td>
</tr>
<tr>
<!-- 3 -->
<td>是否毕业</td>
<td width="404px"></td>
<td width="200px">专业是啥</td>
<td width="404px"></td>
</tr>
<tr>
<!-- 4 -->
<td>大学名称</td>
<td colspan="3"></td>
</tr>
<tr>
<!-- 5 -->
<td>从事过的工作</td>
<td colspan="3"></td>
</tr>
<tr>
<!-- 6 -->
<td>H5基础情况</td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<!-- 7 -->
<td>自我性格描述</td>
<td colspan="4"></td>
</tr>
<tr>
<!-- 8 -->
<td rowspan="2">简述1.目标规划 2.对H5的疑问 3.建议</td>
<td rowspan="2" colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<!-- 9 -->
<td colspan="2"></td>
</tr>
</table>
- border-collapseプロパティ(cssプロパティ):
border-collapseプロパティは、テーブルの境界線を1つの境界線にマージするか、標準のHTMLのように個別に表示するかを設定します。
separate:默认值,边框会分开,不会忽略 border-spacing 和 empty-cells 属性。
collapse:边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit:规定应该从父元素继承 border-collapse 属性的值。
テーブルのマージ境界プロパティを設定します。
- table
{
border-collapse:collapse;
}