2009.03.25
テーブルの作り方XHTML1.0 Strict
CSSは以下のコードを使用
table {margin:0px auto; }
HTMLは以下のコードを使用
<table border=”1″ cellspacing=”5″ width=”500″ summary=”サンプル1″>
<caption>テーブルサンプル1 </caption>
<colgroup style=”background: #ffffdd; width: 160px;”></colgroup>
<colgroup style=”background: #ffddff; width: 100px;”></colgroup>
<colgroup style=”background: #ccffff; width: 60px;”></colgroup>
<colgroup style=”background: #ddffdd; width: 140px;”></colgroup>
<tbody>
<tr style=”background: #F5F5FF;” align=”center” valign=”bottom”>
<th abbr=”見出し1″>見出し1左右center天地bottom幅160px</th>
<th abbr=”見出し2″>見出し2幅幅100px</th>
<th abbr=”見出し3″>見出し3幅60px</th>
<th abbr=”見出し4″>見出し4幅140px</th>
</tr>
<tr align=”center” valign=”middle”>
<td>行1–列1左右center天地middle</td>
<td>行1–列2</td>
<td>行1–列3</td>
<td>行1–列4</td>
</tr>
<tr align=”left” valign=”top”>
<td>行2–列1左右left天地top</td>
<td>行2–列2</td>
<td>行2–列3</td>
<td>行2–列4</td>
</tr>
</tbody>
</table>
<caption>テーブルサンプル1 </caption>
<colgroup style=”background: #ffffdd; width: 160px;”></colgroup>
<colgroup style=”background: #ffddff; width: 100px;”></colgroup>
<colgroup style=”background: #ccffff; width: 60px;”></colgroup>
<colgroup style=”background: #ddffdd; width: 140px;”></colgroup>
<tbody>
<tr style=”background: #F5F5FF;” align=”center” valign=”bottom”>
<th abbr=”見出し1″>見出し1左右center天地bottom幅160px</th>
<th abbr=”見出し2″>見出し2幅幅100px</th>
<th abbr=”見出し3″>見出し3幅60px</th>
<th abbr=”見出し4″>見出し4幅140px</th>
</tr>
<tr align=”center” valign=”middle”>
<td>行1–列1左右center天地middle</td>
<td>行1–列2</td>
<td>行1–列3</td>
<td>行1–列4</td>
</tr>
<tr align=”left” valign=”top”>
<td>行2–列1左右left天地top</td>
<td>行2–列2</td>
<td>行2–列3</td>
<td>行2–列4</td>
</tr>
</tbody>
</table>
上記コードをHTMLに記述する事で以下のXHTML1.0 Strictで有効なテーブルが表示出来ます〔CSSはこのページの最上部のCSSコードを使用。）
各行ごとにテキストの天地位置、左右位置の指定が出来ます。
●属性alignに値を指定し left(左揃え)、center(中央揃え)、center(右揃え)を選択します。
●属性valignに値を指定し top(上揃え)、middle(中央揃え)、bottom(下揃え)を選択します。
各列をグループ化するタグcolgroupを使用し各列ごとに背景色、幅を指定します。
| 見出し1 左右center 天地bottom 幅160px |
見出し2幅 幅100px |
見出し3 幅60px |
見出し4 幅140px |
|---|---|---|---|
| 行1–列1 左右center 天地middle |
行1–列2 | 行1–列3 | 行1–列4 |
| 行2–列1 左右left 天地top |
行2–列2 | 行2–列3 | 行2– |
シンプルにテーブルを使うために
<table style=”border-collapse: collapse;” border=”1″ width=”400″ summary=”サンプル2″>
<tbody>
<tr align=”left” valign=”top”>
<td>あああ</td><td>いいい</td>
</tr>
</tbody>
</table>
<tbody>
<tr align=”left” valign=”top”>
<td>あああ</td><td>いいい</td>
</tr>
</tbody>
</table>
以下のような表になります。
| あああ | いいい |
Content Comments
Comment