1. 程式人生 > >表格和列表

表格和列表

一、表格

表格由table標籤來定義,每個表格都有若干行(由<tr>標籤來定義),每行被分割為若干個單元格(由<td>標籤來定義),資料單元格可以包含文字、圖片、列表、段落、表單、水平線、表格等等。

1、標籤

  表格標籤:table
  行標籤:tr
  單元格標籤:td
  標題標籤:caption
  表格頭標籤:thead
  表格身體標籤:tbody

2、表格的基本結構

<table border="1">
  <tr>
    <td>內容</td>
    <td>內容</td>
  </tr>
  <tr>
    <td>內容</td>
    <td>內容</td>
  </tr>
</table>

在瀏覽器顯示:

3、屬性

table屬性:
   width:100px  100%  寬度不寫 寬度根據內容來
   border:        邊框
   cellpading="0"  邊距
   cellspacing="0" 間距
tr屬性:
   height:100 g高度
   align:center  left  right  水平對齊方式
   valing:top  bottom  middle  垂直對齊方式
td/th屬性
   height:100 g高度
   align:center  left  right  水平對齊方式
   valing:top  bottom  middle  垂直對齊方式

4、注意事項

 表格寬度預設是內容寬度
 單元格橫平豎直
 單元格數量沒有限制
 一般會把邊距和間距設為0
 注意表格格式

5、合併單元格

單元格屬性:
   colspan=2 水平合併  向右合併  值包含自己
   rowspan=2 垂直合併  向下合併  值包含自己
   合併單元格本質就是改變高度 寬度 佔位實現的

二、列表

有序列表使用數字進行標記

無序列表使用粗體圓點(典型的小黑圓圈)進行標記

自定義列表:註釋

 

1、有序列表使用<ol>標籤

<ol>
 <li>Milk</li>
 <li>Coffee</li>
</ol>

在瀏覽器顯示:

 

2、無序列表使用<ul>標籤

<ul>
 <li>Milk</li>
 <li>Coffee</li>
</ul>

在瀏覽器顯示:

 

3、自定義列表  

自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開

<dl>
 <dt>Coffee</dt>
  <dd>- black hot drink</dd>
 <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

在瀏覽器顯示: