表作成<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> |
サンプル |
メニュー |
上級編 |