1. Home
  2. スタイルシート CSS
  3. テーブル
  4. セルの大きさを指定する

セルの大きさを指定する


width: ***; height: ***;


width は横幅を、height は高さを指定するプロパティです。

このプロパティをtd要素th要素)に対して設定すると、セルの大きさを指定することができます。



td {
width: 100px;
height: 50px;
}


プロパティ名 説明
width 数値+単位(px 等)またはパーセント セルの横幅を指定 (初期値は auto
height 数値+単位(px 等)またはパーセント セルの高さを指定 (初期値は auto

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

table, td, th {
border: 2px #2b2b2b solid;
}

th.example1 { width: 150px; }
th.example2 { width: 300px; }

td { height: 100px; }

</style>

</head>
<body>

<table>
<tr>
<th class="example1">見出しセル1</th>
<th class="example2">見出しセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>

</body>
</html>

表示例

見出しセル1 見出しセル2
データセル1 データセル2

テーブル

ページの先頭へ