ホームページの作り方
TOP html講座 css講座 アクセスアップ Link

TOP > html講座 > 表作成
表作成<table>タグ
表を作るタグです。
表として使う他にも、レイアウトに利用する方が大勢います。
このサイトも実は表だらけです。右のメニューとかもtableタグを使っています。
<table>の中には<tr>タグと<td>タグが入り、trが行、tdが列の数に対応します。
通常の2行3列
<table border>
<tr>
<td>1行1列</td>
<td>1行2列</td>
<td>1行3列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
<td>2行3列</td>
</tr>
</table>

サンプル
table borderのborderは「枠線を表示するよ」という意味で、書かないと枠線が消えます。
その他色々な設定はtableタグに「属性」を付け加えることで出来ます。

枠の太さ指定
<table border="10">
枠の太さ指定
<table bordercolor="#00FF00">
セル間の幅指定
<table border cellspacing="5">
表のサイズ指定(widthが横、heightが縦)
<table border width="300px" height="200px">

サンプル

tdではtableより細かいセル単位で色などが指定できます。

背景色 <table border width="300px" height="200px">
<tr>
<td bgcolor="#00ff00">1行1列</td>
<td >1行2列</td>
<td bgcolor="#00ff00">1行3列</td>
</tr>
<tr>
<td>2行1列</td>
<td bgcolor="#00ff00">2行2列</td>
<td>2行3列</td>
</tr>
</table>

tdでセルの結合もできます。rowspanが縦、colspanが横に対応。数値=結合するセル数です。

セルの結合
<table border>
<tr>
<td colspan="2">1行1列</td>
<td rowspan="2">1行3列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
</tr>
</table>

サンプル

HPの作り方