table tr td 表
table 要素は、htmlの中で、フォーム要素などと並び、とても複雑な要素の組み合わせを持ちます
テーマでは、table要素 td要素で左右位置制御クラス left center right 上下位置調整クラス top middle bottom を使用することが出来ます。
また、テーブル幅が指定されている場合など、テーブルの幅がブラウザの幅を上回る場合は、スクロールバーが下部に表示されます。
表示例
| ol | あいうえお | abc | ａｂｃ | abc | ａｂｃ |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<table> <tbody> <tr> <td>ol</td> <td>あいうえお</td> <td>abc</td> <td>ａｂｃ</td> <td>abc</td> <td>ａｂｃ</td> </tr> </tbody> </table> |
table thead th tbody tfoot tr td ヘッダーフッター付の表
| ol | あいうえお | abc | ａｂｃ | abc | ａｂｃ |
|---|---|---|---|---|---|
| ol | あいうえお | abc | ａｂｃ | abc | ａｂｃ |
| ol | あいうえお | abc | ａｂｃ | abc | ａｂｃ |
| ol | あいうえお | abc | ａｂｃ | abc | ａｂｃ |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<table> <thead style="background: #eeeedd;"> <tr> <th scope="col">ol</th> <th scope="col">あいうえお</th> <th scope="col">abc</th> <th scope="col">ａｂｃ</th> <th scope="col">abc</th> <th scope="col">ａｂｃ</th> </tr> </thead> <tfoot style="background: #c0c0c0;"> <tr> <td>ol</td> <td>あいうえお</td> <td>abc</td> <td>ａｂｃ</td> <td>abc</td> <td>ａｂｃ</td> </tr> </tfoot> <tbody style="background: #ffffff;"> <tr> <td>ol</td> <td>あいうえお</td> <td>abc</td> <td>ａｂｃ</td> <td>abc</td> <td>ａｂｃ</td> </tr> <tr> <td>ol</td> <td>あいうえお</td> <td>abc</td> <td>ａｂｃ</td> <td>abc</td> <td>ａｂｃ</td> </tr> </tbody> </table> |
table tr td colgroup colgroup要素を持つ表
| ol | あいうえお | abc | ａｂｃ | abc | ａｂｃ |
| ol | あいうえお | abc | ａｂｃ | abc | ａｂｃ |
| ol | あいうえお | abc | ａｂｃ | abc | ａｂｃ |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<table> <colgroup style="background: #ccccff;"> </colgroup> <colgroup style="background: #eeccff;"> </colgroup> <colgroup style="background: #eeccff;"> </colgroup> <colgroup style="background: #eeccff;"> </colgroup> <colgroup style="background: #eeccff;"> </colgroup> <colgroup style="background: #eeccff;"> </colgroup> <tbody> <tr> <td>ol</td> <td>あいうえお</td> <td>abc</td> <td>ａｂｃ</td> <td>abc</td> <td>ａｂｃ</td> </tr> <tr> <td>ol</td> <td>あいうえお</td> <td>abc</td> <td>ａｂｃ</td> <td>abc</td> <td>ａｂｃ</td> </tr> <tr> <td>ol</td> <td>あいうえお</td> <td>abc</td> <td>ａｂｃ</td> <td>abc</td> <td>ａｂｃ</td> </tr> </tbody> </table> |
table tr td caption caption要素を持つ表
| ol | あいうえお | abc | ａｂｃ | abc | ａｂｃ |
| ol | あいうえお | abc | ａｂｃ | abc | ａｂｃ |
| ol | あいうえお | abc | ａｂｃ | abc | ａｂｃ |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<table> <caption>caption ABCD abcd えいびぃしぃでぃ 瑛美市出</caption> <tbody> <tr> <td>ol</td> <td>あいうえお</td> <td>abc</td> <td>ａｂｃ</td> <td>abc</td> <td>ａｂｃ</td> </tr> <tr> <td>ol</td> <td>あいうえお</td> <td>abc</td> <td>ａｂｃ</td> <td>abc</td> <td>ａｂｃ</td> </tr> <tr> <td>ol</td> <td>あいうえお</td> <td>abc</td> <td>ａｂｃ</td> <td>abc</td> <td>ａｂｃ</td> </tr> </tbody> </table> |