TOP > HP関連>

テーブルの作成

テーブルとは簡単に言うと表のことで、表に色を付けたり線を見えなくして文字など
の位置揃えなどに使用します。

指定できるオプション

<table>のタグで使用できるオプションの一覧です。

オプション名 説明 使用例
border 線の太さを指定 <table border="1">
colspan 左右のセルと結合 <td colspan="2">
rowspan 上下のセルと結合 <td rowspan="2">
bgcolor 背景色を設定 <td bgcolor="#ffcaff" >
cellpadding セル内の余白の設定 <table cellpadding="0">
cellspacing セルの間隔の設定 <table cellspacing="0">
width 横幅の指定 <table width="50">
height 高さの指定 <table height="50">
align 位置揃え左右 <td align="center">
valign 位置揃え上下 <td align="top">


簡単なテーブル

簡単なテーブルの作成方法です。
構造は以下のようになっています。

構文
<table border= "線の太さ">
<tr> //行の作成
<td>表示したい文字</td>//列の作成
</tr>
</table>
<tr><tr/>で行を作成します。
その行の中に<td></td>で列を作成します。
borderで太さを指定します。
線を非表示にしたい場合はborder="0"にします。

使用例
<table border="2">
<tr>
<td>氏名</td>
<td>電話番号</td>
</tr>

<tr>
<td>さすけ</td>
<td>123-456-789</td>
</tr>

</table>

氏名 電話番号
さすけ 123-456-789

セルの結合


colspanを使用することにより複数の左右のセルと結合が可能です。
上下のセルと結合する場合はrowspanを使用します。

<table border="1">
<tr>
<td>食べ物の種類</td>
<td>食べ物名</td>
<td>味</td>
<td>色</td>
</tr>
<tr>
<td rowspan="2">野菜</td>
<td>ピーマン</td>
<td>苦い</td>
<td>緑</td>
</tr>
<tr>
<td>未知の野菜</td>
<td colspan="2">不明</td>
</tr>
</table>

食べ物の種類 食べ物名
野菜 ピーマン 苦い
未知の野菜 不明

背景色を付ける
色を指定するにはbgcolor="色"で指定します。
<table>で指定した場合は表全体が、
<tr>で指定した場合は行全体が、
<td>で指定した場合は1セルの色が変わります。

<table border="1">
<tr bgcolor="#cccccc">
<td>食べ物の種類</td>
<td>食べ物名</td>
<td>味</td>
<td>色</td>
</tr>
<tr>
<td rowspan="2" bgcolor="#ffcaff">野菜</td>
<td>ピーマン</td>
<td>苦い</td>
<td>緑</td>
</tr>
<tr>
<td>未知の野菜</td>
<td colspan="2">不明</td>
</tr>
</table>

食べ物の種類 食べ物名
野菜 ピーマン 苦い
未知の野菜 不明

関連ページ
・テーブルの作成
テーブルを綺麗に見せる方法
最近の記事
当サイトについて  免責事項  プライバシーポリシー
Copyright (C) Sasuke 2012 All rights reserved.