1. 程式人生 > >html 表格、邊距 解析

html 表格、邊距 解析

一個簡單的表格:

<table id="tab1" width="100%" cellspacing="0" border="1px">
  <thead>
  	<tr>
  		<th>編號</th>
  		<th>姓名</th>
  		<th>性別</th>
  		<th>操作</th>
  	</tr>
  </thead>
  	<tbody>
  		<tr>
  		<td>1</td>
  		<td>ss</td>
  		<td>男</td>
  	</tr>
  	</tbody>
  </table>
tr代表行 td就是列 colspan="4"(4個) cellspacing="0"消除雙層邊距放在table裡面
是一個樣式style:border-collapse:collapse;用來消除單元格間距、等於cellspacing="0"


rowspan=xx (合併xx行,同時需要把下一行刪除xx個<td></td>標籤 ,如果不刪處表格就會被變形)
colspan=xx (合併xx列,同時需要把本行刪除xx個<td></td>標籤 ,同樣不刪除表格就會變形)

colspan是橫向合併;rowspan是縱向合併。
cellspacing="0" cellpadding="0"為html中為table定義的屬性,在CSS中沒有.
cellpadding 對應 padding
cellspacing 對應 margin

<td style="border-right:none;">aaa</td> <!-- 無右邊框 -->
<td style="border-left:none;">bbb</td> <!-- 無左邊框 -->

語法:<table summary="表格簡介文字">
 <caption>標題文字</caption>載入<tr><td>上方
表格內邊框的高度取決於;tr的高度,也可以設定td的高度。

table {
   width: 50%;
   background-color:#ffffff;
   }
   tr {
    text-align: center;
}
width: 33%;
}
td.black {
 background-color: #000000;
 }
表格設定樣式