《CSS教程》10章 表格的设定

---

本章内容的关键是要结合第1章的Box的示意图，正确理解Margin、border、Padding、Context的概念。

单双线的设定

border-collapse: 表格边框的形式
      collapse:单线,  separate:双线

s10_01.htm

【CSS】
body { margin: 2em }
table#sample1 { border-collapse: collapse }
table#sample2 { border-collapse: separate }
table, th, td { border: 3px solid #999999 }
th {
  color: #000000;
  background-color: #cccccc
}
caption{
  font-size: large;
  font-weight: bold;
  color: #ff3300;
  background: transparent
}

【HTML】
<table border="3" cellpadding="8" id="sample1">
<caption>collapse</caption>
<tr><th>Head</th><th>Head</th><th>Head</th></tr>
<tr><td>数据</td><td>数据</td><td>数据</td></tr>
<tr><td>数据</td><td>数据</td><td>数据</td></tr>
</table>

<table border="3" cellpadding="8" id="sample2">
<caption>separate</caption>
<tr><th>Head</th><th>Head</th><th>Head</th></tr>
<tr><td>数据</td><td>数据</td><td>数据</td></tr>
<tr><td>数据</td><td>数据</td><td>数据</td></tr>
</table>

单元间的间隔的设定

border-spacing: 间隔           带单位的数字 

s10_02.htm

【CSS】
body { margin: 2em }
table { border-spacing: 1em }
table, th, td { border: 3px solid #999999 }
th {
  color: #000000;
  background-color: #cccccc
}

【HTML】
<table border="3" cellpadding="8">
<tr><th>Head</th><th>Head</th><th>Head</th></tr>
<tr><td>数据</td><td>数据</td><td>数据</td></tr>
<tr><td>数据</td><td>数据</td><td>数据</td></tr>
</table>

表的标题置上置下的设定

caption-side: top/bottom          
      标题置上:top，置上:bottom

s10_03.htm

【CSS】
body { margin: 2em }
caption {
  caption-side: bottom;
  font-size: large;
  font-weight: bold;
  color: #ff3300;
  background: transparent
}
table, th, td { border: 3px solid #999999 }
th {
  color: #000000;
  background-color: #cccccc
}

【HTML】
<table border="3" cellpadding="8">
<caption>caption-side: bottom</caption>
<tr><th>Head</th><th>Head</th><th>Head</th></tr>
<tr><td>数据</td><td>数据</td><td>数据</td></tr>
<tr><td>数据</td><td>数据</td><td>数据</td></tr>
</table>

空单元是否表示的配置

empty-cells: show/hide      
      边框显示用show, 不显示用hide

s10_04.htm

【CSS】
body { margin: 3em }
table, td { border: 3px solid #999999 }
td {
  font-size: large;
  font-weight: bold
}
td.hide { empty-cells: hide }
td.show {
  empty-cells: show;
  border-color: #ff3300
}

【HTML】
<table border="3" cellpadding="8" cellspacing="8">
<tr>
  <td>hide→</td>
  <td class="hide"></td>
</tr>
<tr>
  <td class="show"></td>
  <td>←show</td>
</tr>
</table>