まず，tableのマークアップは次の通り

<table>
  <col class="col1" />
  <col class="col2" />
  <col class="col3" />
  <col class="col4" />
  <col class="col5" />
  <tr>
    <th scope="col">項目1</th>
    <th scope="col">項目2</th>
    <th scope="col">項目3</th>
    <th scope="col">項目4</th>
    <th scope="col">項目5</th>
  </tr>
  <tr>
    <td>data11</td>
    <td>data21</td>
    <td>data31</td>
    <td>data41</td>
    <td>data51</td>
  </tr>
  ......
</table>		

tableにwidthを絶対指定

table {
  width: 500px;
}

tableにwidthを絶対指定し，各セルにpaddingを指定

table {
  width: 500px;
}

table th,
table td {
  padding: 3px 10px;
}

• table幅は500px。

tableにwidthを相対指定し，各セルにpaddingを指定

div.section {
  width: 500px;
  padding: 10px;
}

table {
  width: 100%;
}

table th,
table td {
  padding: 3px 10px;
}

• table幅は500px。

tableにwidthを相対指定し，特定の列にwidthを絶対指定

div.section {
  width: 500px;
  padding: 10px;
}

table {
  width: 100%;
}

table col.col1 {
  width: 70px;
}

table col.col5 {
  width: 150px;
}

table th,
table td {
  border: solid 4px #999;
  padding: 3px 10px;
}

Firefox2ではセルのborderの半分とpaddingが列のwidthに含まれている。Opera9，Safari2，Netscape7も同様。

IE6,7ではセルのpaddingが列のwidthに含まれていない。項目1の幅は90px，項目5の幅は170pxある。

外側のborderはtableに指定しないとダメ。

tableにmarginをとり，widthを相対指定し，特定の列にwidthを絶対指定(1)

div.section {
  width: 600px;
  padding: 10px;
}

table {
  margin-left: 100px;
  width: 100%;
}

table col.col1 {
  width: 70px;
}

table col.col5 {
  width: 150px;
}

table th,
table td {
  padding: 3px 10px;
}

• table幅は600px。

tableにmarginをとり，widthを相対指定し，特定の列にwidthを絶対指定(2)

(1)を修正，tableの幅を83.33%としてみる。（500÷600＝0.8333…）

div.section {
  width: 600px;
  padding: 10px;
}

table {
  margin-left: 100px;
  width: 83.33%;
}

table col.col1 {
  width: 70px;
}

table col.col5 {
  width: 150px;
}

table th,
table td {
  padding: 3px 10px;
}

• table幅の相対指定は親要素の幅に対して行われている。

tableにwidthを指定せず，各列にwidth, 各セルにborder, paddingを指定

table col.col1 {
  width: 70px;
}

table col.col2,
table col.col3,
table col.col4 {
  width: 100px;
}

table col.col5 {
  width: 150px;
}

table th,
table td {
  border: solid 4px #999;
  padding: 3px 10px;
}

Firefox2ではセルのborderの半分とpaddingが列のwidthに含まれている。Opera9，Safari2，Netscape7も同様。

IE6,7ではセルのpaddingが列のwidthに含まれていない。項目1の幅は90px，項目5の幅は170pxある。

tableにwidthを指定せず各セルにwidth, border, paddingを指定

table th,
table td {
  width: 100px;
  border: solid 4px #999;
  padding: 3px 10px;
}

• width, padding, borderは重ならない。通常のBoxモデルと同じ。