9.1 属性の使用
HTMLでのテーブルのスタイリングはいくつかの方法があります。その一つは、テーブルタグやその要素の中に直接属性を使う方法です。現代のウェブ開発者は通常、スタイリングにはCSSを使うことを好みますが、HTML属性の理解は基本的なスタイリングには役立ちます。
テーブルの基本属性
属性 border
テーブルの境界線の太さを決定します。通常、値はピクセルで指定されます。
HTML
<table border="1">
<tr>
<th>名前</th>
<th>評価</th>
</tr>
<tr>
<td>イワン</td>
<td>91</td>
</tr>
<tr>
<td>マリヤ</td>
<td>94</td>
</tr>
<tr>
<td>ニーナ</td>
<td>89</td>
</tr>
</table>
属性 cellpadding:
セル内の余白（セルの境界からの内側の余白）を決定します。
HTML
<table cellpadding="10">
<tr>
<th>名前</th>
<th>評価</th>
</tr>
<tr>
<td>イワン</td>
<td>91</td>
</tr>
<tr>
<td>マリヤ</td>
<td>94</td>
</tr>
<tr>
<td>ニーナ</td>
<td>89</td>
</tr>
</table>
属性 cellspacing:
セル間の距離を決定します。
HTML
<table cellspacing="5">
<tr>
<th>名前</th>
<th>評価</th>
</tr>
<tr>
<td>イワン</td>
<td>91</td>
</tr>
<tr>
<td>マリヤ</td>
<td>94</td>
</tr>
<tr>
<td>ニーナ</td>
<td>89</td>
</tr>
</table>
属性 width と height:
テーブルの幅と高さを決定します。これらの属性は、<td> や <th> タグにも使用して、セルのサイズを設定できます。
HTML
<table style="text-align: left;" width="100%" height="200">
<tr>
<th width="50%">名前</th>
<th width="25%">プロジェクト</th>
<th width="25%">都市</th>
</tr>
<tr>
<td>アリサ</td>
<td>25</td>
<td>パリ</td>
</tr>
</table>
属性 align:
ページ上でのテーブルの配置を決定します (left, right, center)。
HTML
<table align="center">
<tr>
<th>名前</th>
<th>評価</th>
</tr>
<tr>
<td>イワン</td>
<td>91</td>
</tr>
<tr>
<td>マリヤ</td>
<td>94</td>
</tr>
<tr>
<td>ニーナ</td>
<td>89</td>
</tr>
</table>
属性 bgcolor:
テーブルまたはセルの背景色を決定します。
HTML
<table bgcolor="#f0f0f0">
<tr>
<th>名前</th>
<th>評価</th>
</tr>
<tr>
<td>イワン</td>
<td>91</td>
</tr>
<tr>
<td>マリヤ</td>
<td>94</td>
</tr>
<tr>
<td>ニーナ</td>
<td>89</td>
</tr>
</table>
9.2 テーブルセルの属性
テーブルセルの属性
属性 colspan:
セルを横方向に結合します。
HTML
<td colspan="2">結合されたセル</td>
属性 rowspan:
セルを縦方向に結合します。
HTML
<td rowspan="2">結合されたセル</td>
属性 align:
セルの内容の水平配置を決定します (left, right, center)。
HTML
<td align="center">中央揃えテキスト</td>
属性 valign:
セルの内容の垂直配置を決定します (top, middle, bottom)。
HTML
<td valign="top">トップに配置されたテキスト</td>
属性 bgcolor:
セルの背景色を決定します。
HTML
<td bgcolor="#ffcc00">カラフルな背景</td>
9.3 完全な例
属性を使ったテーブルスタイリングの完全な例:
HTML
<table border="1" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e0e0e0">
<caption>学生のリストとその評価</caption>
<thead bgcolor="#c0c0c0">
<tr>
<th align="left">名前</th>
<th align="center">年齢</th>
<th align="right">都市</th>
</tr>
</thead>
<tbody>
<tr>
<td>イワン</td>
<td align="center">30</td>
<td align="right">ロンドン</td>
</tr>
<tr>
<td colspan="2" align="center">マリヤとペトル</td>
<td align="right">リバプール</td>
</tr>
<tr>
<td rowspan="2" valign="middle">アンナ</td>
<td>25</td>
<td>マンチェスター</td>
</tr>
<tr>
<td>27</td>
<td>リーズ</td>
</tr>
</tbody>
<tfoot>
<td colspan="3" align="center">テーブルの終わり</td>
</tfoot>
</table>
例の説明
border="1": テーブルの境界線を1ピクセルの太さに設定cellpadding="10": すべてのセルに10ピクセルの内側の余白を設定cellspacing="5": テーブルのセル間に5ピクセルの距離を設定width="80%": テーブルの幅を親要素の80%に設定align="center": テーブルをページの中央に配置bgcolor="#e0e0e0": テーブルの背景色を設定<caption>: テーブルにタイトルを追加-
<thead>と<tbody>: テーブルのヘッダーと本文をグループ化。ヘッダーの背景色はbgcolor="#c0c0c0"で設定 <th>と<td>: ヘッダーセルとデータセルの定義に使用<align>と<valign>: セルの内容の水平および垂直配置を決定<colspan>と<rowspan>: 水平方向および垂直方向にセルを結合
GO TO FULL VERSION