 テーブル 表の大きさ スタイルシート |
| ■ width / height プロパティ |
table要素、td 要素に、width / height プロパティを指定することで、width属性 / height属性の代替指定ができます。
|
値
- auto (内容により自動調整 デフォルト)
- パーセンテージ値 ( % )
- ピクセル ( px )
|
|
 ソース 基本
全体のサイズ( px )を指定し、セルのサイズ( % )を指定
<table style="width : 290 ; height : 200 ; ">
<tr>
<td>1972</td>
<td style="width : 50% ; height : 30% ; ">1973</td>
<td>1974</td>
</tr>
<tr>
<td>1975</td>
<td>1976</td>
<td>1977</td>
</tr>
</table>
|
 表示
|
|
|
|
|
| ソース まとめ指定
全体のサイズ( px )を指定し、セルのサイズ( px )を指定
head要素内の記述
<style type="text/css">
<!--
table { width : 290 ; height : 200 ; }
.size15070 { width :150 ; height : 70 ; }
-->
</style>
body要素内の記述
<table>
<tr>
<td>1972</td>
<td class="size15070">1973</td>
<td>1974</td>
</tr>
<tr>
<td>1975</td>
<td>1976</td>
<td>1977</td>
</tr>
</table>
|
表示
|
|
|
| table要素をいくつか使用する場合は、table要素のサイズも classプロパティで指定することもできます。 |
| 上記の表には、table,td { border : solid 1px #c0c0c0 ; } も罫線を表示する為に指定してあります。 |
|
|
|
|
|
|
テーブル 表の大きさ
大きさの指定のないセル