::: Paper Sky.白紙天空 ┼ Blog {吉兒.蒐集} :::

關於部落格
(( 吉兒的個人網站 http://ps.saycoo.com/ ))
  • 8341

    累積人氣

  • 1

    今日人氣

    0

    訂閱人氣

表格樣式

<style type="text/css">
<!--
/* ------------------------- */
.table1 {margin: 1em auto;color: #333;background: #ccc url(http://ps.saycoo.com/graphics/bg1.gif) repeat;}
thead {color: #ffffff;background-color: #ffcc00;}
th, td {padding: 0;white-space: nowrap}
caption {color: #000000;background-color: #ffffff;}
.table2{width: 250px;table-layout: fixed;}
.table3{border-collapse: collapse;}
.table4{border-collapse: separate;}
.table5{border-collapse: separate;border-spacing: 1em}
.table6{border-collapse: separate;empty-cells: show;}
.table7{border-collapse: separate;empty-cells: hide;}

/* ------------------------- */
#table2 img { vertical-align: bottom }
-->
</style>
</head>
<body>

<p>
<table border="1" class="table1">
<caption>適用於thead要素</caption>
<thead>
<tr><th>項目</th><th>項目</th><th>項目</th></tr>
</thead>
<tbody>
<tr><td>內容</td><td>內容</td><td>內容</td></tr>
<tr><td>禁止在表格內換行</td><td>禁止在表格內換行</td><td>禁止在表格內換行</td></tr>
</tbody>
</table>

<p>消除圖片下方的間隙<br>
<table border="5" id="table1">
<caption>table1</caption>
<tr><td><img src="http://ps.saycoo.com/graphics/bg1.gif" alt="範例圖片"></td></tr>
</table>

<table border="5" id="table2">
<caption>table2</caption>
<tr><td><img src="http://ps.saycoo.com/graphics/bg1.gif"alt="範例圖片"></td></tr>
</table>


<table border="1">
<caption>一般顯示方式</caption>
<tr><th>此為標題儲存格</th><th>標題</th></tr>
<tr><td>此為資料儲存格</td><td>資料</td></tr>
</table>

<table border="1" class="table2">
<caption>使用fixed方式顯示</caption>
<tr><th>此為標題儲存格</th><th>標題</th></tr>
<tr><td>此為資料儲存格</td><td>資料</td></tr>
</table>

<table border="1" class="table3">
<caption>collapse</caption>
<tr><th>標題</th><th>標題</th></tr>
<tr><td>資料</td><td>資料</td></tr>
<tr><td>資料</td><td>資料</td></tr>
</table>

<table border="1" class="table4">
<caption>separate</caption>
<tr><th>標題</th><th>標題</th></tr>
<tr><td>資料</td><td>資料</td></tr>
<tr><td>資料</td><td>資料</td></tr>
</table>

<table border="1" class="table5">
<caption>指定間隔</caption>
<tr><th>標題</th><th>標題</th></tr>
<tr><td>資料</td><td>資料</td></tr>
<tr><td>資料</td><td>資料</td></tr>
</table>

<table border="1" class="table6">
<caption>指定以show</caption>
<tr><th></th><th>標題</th></tr>
<tr><td>資料</td><td></td></tr>
<tr><td></td><td>資料</td></tr>
</table>

<table border="1" class="table7">
<caption>指定以hide</caption>
<tr><th></th><th>標題</th></tr>
<tr><td>資料</td><td></td></tr>
<tr><td></td><td>資料</td></tr>
</table>


<p>內框線的顯示方式範例</p>
<span class="h01">●border="6" rules="none" </span>
<TABLE border="6" rules="none">
  <TR>
    <TH>姓名</TH>
    <TH>年齡</TH>
    <TH>性別</TH>
  </TR>
  <TR>
    <TD>XXX</TD>
    <TD>30</TD>
    <TD>男</TD>
  </TR>
  <TR>
    <TD>YYY</TD>
    <TD>25</TD>
    <TD>女</TD>
  </TR>
</TABLE>
<span class="h01">●border="6" rules="cols" </span>
<TABLE border="6" rules="cols">
  <TR>
    <TH>姓名</TH>
    <TH>年齡</TH>
    <TH>性別</TH>
  </TR>
  <TR>
    <TD>XXX</TD>
    <TD>30</TD>
    <TD>男</TD>
  </TR>
  <TR>
    <TD>YYY</TD>
    <TD>25</TD>
    <TD>女</TD>
  </TR>
</TABLE>
<span class="h01">●border="6" rules="rows" </span>
<TABLE border="6" rules="rows">
  <TR>
    <TH>姓名</TH>
    <TH>年齡</TH>
    <TH>性別</TH>
  </TR>
  <TR>
    <TD>XXX</TD>
    <TD>30</TD>
    <TD>男</TD>
  </TR>
  <TR>
    <TD>YYY</TD>
    <TD>25</TD>
    <TD>女</TD>
  </TR>
</TABLE>

相簿設定
標籤設定
相簿狀態