■いろいろな表 ＴＡＢＬＥ：表全体 ＴＲ：行 (row) ＴＤ：セル (data） ＴＨ：見出し (header）
|
ＨＴＭＬの指定
|
画面表示
|
||||||||||||
| <table border="1"> <tr> <td>○○</td><td>△△</td> </tr> <tr> <td>●●</td><td>▲▲</td> </tr> </table> |
◇テーブルの基本形 （枠線あり border="1"）
|
||||||||||||
| <table border="1"> <tr> <th>まる</th> <th>さんかく</th> </tr> <tr><td>○○</td><td>△△</td></tr> <tr><td>●●</td><td>▲▲</td></tr> </table> |
◇見出し付き （th） （自動的に太字、センタリング）
|
||||||||||||
| <table border="1"> <tr> <th style="width:80px ; height:40px">まる</th> <th style="width:120px">さんかく</th> </tr> <tr><td>○ ○</td><td>△ △</td></tr> <tr><td>●●</td><td>▲▲</td></tr> </table> |
◇セル幅と高さの指定 （幅 width 高さ height）
|
||||||||||||
| <table border="1"> <tr> <th style="width:80px">まる</th> <th style="width:120px">さんかく</th> </tr> <tr style="text-align:center"> <td>○ ○</td><td>△ △</td></tr> <tr><td>●●</td> <td style="text-align:right">▲▲</td></tr> </table> |
◇文字の配置（text-align指定） （中央 center 右 right）
|
||||||||||||
<table border="5"> <tr> <th style="padding:20px">まる</th> <th style="padding:20px">さんかく</th> </tr> <tr><td style="padding:30px">○○</td><td>△△</td></tr> <tr><td>●●</td><td>▲▲</td></tr> </table> |
◇セル内の余白 padding
|
||||||||||||
| <table border="1"> <tr style="background-color:yellow"> <th style="width:80px">まる</th> <th style="width:120px">さんかく</th> </tr> <tr style="height:50px"> <td>○ ○</td> <td style="background-color:#9d3">△ △</td> </tr> <tr style="height:80px"> <td style="background-image:url(sakura.gif)">●●</td> <td>▲▲</td> </tr> </table> |
◇背景色・背景画像の指定 background-color:色コード background-image:url(画像)
|
||||||||||||
| <table border="1"> <tr bgcolor="gold"> <th colspan="2">都道府県名</th> <th>県庁所在地</th> </tr> <tr> <th rowspan="4" bgcolor="gold" width="60">関東</th> <td width="70">東京都</td> <td width="100">東京</td> </tr> <tr> <td>神奈川県</td> <td>横浜</td> </tr> <tr> <td>千葉県</td> <td>千葉</td> </tr> <tr> <td>栃木県</td> <td>宇都宮</td> </tr> </table> |
◇セルの連結
横に連結 colspan="2" （２列分を１個のセルにする） 縦に連結 rowspan="4" （４行分を１個のセルにする） |
||||||||||||
※align、bgcolor、width、height属性：HTML5では廃止