-
テーブル要素テーブル
-
列の幅と配置を設定する2つの方法
最初のタイプ：セル要素tdの幅と整列属性を設定します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="2px" cellspacing="0" cellpadding="">
<tr>
<td align="center" width="100px">星期</td>
<td align="center" width="150px">星期一</td>
<td align="center" width="150px">星期二</td>
<td align="center" width="150px">星期三</td>
<td align="center" width="150px">星期四</td>
<td align="center" width="150px">星期五</td>
<td align="center" width="150px">星期六</td>
<td align="center" width="150px">星期日</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">Monday</td>
<td align="center">Tuesday</td>
<td align="center">Wednesday</td>
<td align="center">Thursday</td>
<td align="center">Friday</td>
<td align="center">Saturday</td>
<td align="center">Sunday</td>
</tr>
</table>
</body>
</html>
2番目：col要素（列）にwidth属性を設定し（各col要素は各列に順番に対応します）、tr要素にalign属性を設定します（tr要素は各行に順番に対応します）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="" cellspacing="0" cellpadding="">
<col width="150px">
<col width="200px">
<tr align="center">
<td >星期</td>
<td >星期一</td>
<td >星期二</td>
<td >星期三</td>
<td >星期四</td>
<td >星期五</td>
<td >星期六</td>
<td >星期日</td>
</tr>
<tr align="center">
<td align="center"></td>
<td align="center">Monday</td>
<td align="center">Tuesday</td>
<td align="center">Wednesday</td>
<td align="center">Thursday</td>
<td align="center">Friday</td>
<td align="center">Saturday</td>
<td align="center">Sunday</td>
</tr>
</table>
</body>
</html>
3.フォームのマージ
履歴書作成ケース
6行7列のクイック書き込みtr6 > td7最後にTabキーを押します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1px" cellspacing="0" cellpadding="0">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="200px">
<col width="200px">
<tr height="20px" align="center">
<td colspan="7">简历</td> <!--合并横向7个单元格-->
</tr>
<tr height="20px" align="center">
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4">照片</td> <!--合并纵向4个单元格-->
</tr>
<tr height="20px" align="center">
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td><!--合并横向3个单元格-->
</tr>
<tr height="20px" align="center">
<td>电话</td>
<td></td>
<td>政治面貌</td>
<td colspan="3"></td><!--合并横向3个单元格-->
</tr>
<tr height="20px" align="center">
<td>毕业院校</td>
<td colspan="5"></td>
</tr>
<tr height="20px" align="center">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
4.ヘッダー
- colgroupを使用して複数の列属性を書き込む
履歴書ケースの簡略版：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1px" cellspacing="0" cellpadding="0">
<colgroup span="5" width="100px"></colgroup>
<colgroup span="2" width="200px"></colgroup>
<tr height="20px" align="center">
<th colspan="7">简历</td> <!--合并横向7个单元格-->
</tr>
<tr height="20px" align="center">
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4">照片</td> <!--合并纵向4个单元格-->
</tr>
<tr height="20px" align="center">
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td><!--合并横向3个单元格-->
</tr>
<tr height="20px" align="center">
<td>电话</td>
<td></td>
<td>政治面貌</td>
<td colspan="3"></td><!--合并横向3个单元格-->
</tr>
<tr height="20px" align="center">
<td>毕业院校</td>
<td colspan="5"></td>
</tr>
<tr height="20px" align="center">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
