陳力：傳智播客古代 珍寶幣 泡泡龍遊戲開發第四講：html表格元素

zhenbaobe發表於2015-07-19
遊戲開發HTML

陳力：傳智播客古代 珍寶幣 泡泡龍遊戲開發第四講：html表格元素


        摘要：通過前節《陳力：傳智播客古代 珍寶幣 泡泡龍遊戲開發第三講：html符號實體、超連結》 學習了html符號實體、超連結、錨標籤和 Href 屬性等內容。知道了空格字元實體用&nbsp;表示，超連結用<a>（錨）標籤來建立，target有”_self,_blank,_top,_parent”幾種。在錨名稱前加了#新增到 URL 的最後，就可以直接連結到錨所在的節。本章將從table元素進行較詳細的講解。tr表示一行,td表示一列。Rowspan表示合併行。Colspan表示合併列。等等內容。本節陳力：傳智播客古代 珍寶幣 泡泡龍遊戲開發第四講：html表格元素。

    在CSS+DIV之前，對網頁佈局要求不高，通常使用table佈局(即使用表格來顯示資料，同時用於佈局)。
    用<table> 標籤來定義表格。表格由 <tr> 標籤定義行，每行用<td>標籤定義列，也就是資料單元格的內容。在表格中，可以顯示文字、圖片、列表、水平線、段落、表單、表格等等內容。
<table border="1px">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
</table>
    邊框：在預設情況下，表格是不顯示邊框屬性的。邊框屬性用border來表示。比如<table border=”1px”><tr><td>內容</td></tr></table>
    表頭：表格的表頭使用<th>標籤進行定義。
    注意：空的單元格的邊框不被顯示。（在Mozilla Firefox中則將整個邊框顯示）為了避免這種情況，在空單元格中新增一個空格佔位符以便顯示邊框效果。
border="0" 時，也表示沒有邊框，
   顯示垂直表頭：
<h4>垂直的表頭：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>電話</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>電話</th>
  <td>555 77 855</td>
</tr>
</table>


    表格標題：<caption>我的標題</caption>
<table border="6">
<caption>表格標題</caption>
<tr>
  <td>軟體設計</td>
  <td>網站建設</td>
  <td>畢業設計</td>
</tr>
<tr>
  <td>媒體文案</td>
  <td>企業軟體</td>
  <td>股票軟體</td>
</tr>
</table>


 軟體設計,網站建設


    跨行或跨列：colspan表示橫跨的列數。rowspan表示橫跨的行數。
<h4>橫跨兩列的單元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">電話</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>


<h4>橫跨兩行的單元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">電話</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>


 軟體設計,網站建設


    注意：表示之內可以有表格或者其它元素。也可以有<li></li>
    單元格邊距: <table border="1"cellpadding="10">表示建立單元格內容與其邊框之間的空白。
    單元格間距(Cell spacing) ：<table border="1" cellspacing="10">表示單元格之間的距離。 
    背景顏色：<table border="1" bgcolor="red">
    背景影象：<table border="1" background="  ">
    單元背景：
<table border="1">
<tr>
  <td bgcolor="red">First</td>  <td>Row</td>
</tr>   
<tr>
  <td background=" " tppabs="  ">
  Second</td> <td>Row</td>
</tr>
</table>
     在表格單元中排列內容：align="left"、right、center


    框架(frame)屬性 : 控制圍繞表格的邊框.
<table frame="box">  frame="above":  frame="below":  "hsides":  "vsides":


Table應用案例：
 軟體設計,網站建設


<html>
<title>俺第一個例項</title>
<head>
</head>
<body>
<Center>
成績表
</center>
<br/>
<!--表格-->
<table align="center" align="center" bordercolor="579AFE" height="10px"  border="3px" width="500px">
<tr align="center">
<td>專案</td>
<td colspan="5" align="center">上課</td>
<td colspan="2" align="center">休息</td>
</tr>


<tr bgcolor="pink" align="center">
<th>星期</b></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>


<tr align="center">
<td rowspan="4" align="center">上午</td>
<td>語文</td>
<td>數學</td>
<td>英語</td>
<td>英語</td>
<td>物理</td>
<td>計算機</td>
<td rowspan="4" align="center">休息</td>
</tr>


<tr align="center">


<td>數學</td>
<td>數學</td>
<td>地理</td>
<td>歷史</td>
<td>化學</td>
<td>計算機</td>


</tr>


<tr align="center">


<td>化學</td>
<td>語文</td>
<td>體育</td>
<td>計算機</td>
<td>英語</td>
<td>計算機</td>


</tr>


<tr align="center">


<td>政治</td>
<td>英語</td>
<td>體育</td>
<td>歷史</td>
<td>地理</td>
<td>計算機1</td>


</tr>
<tr></tr>
<tr align="center" >
<td rowspan="2" 
>下午</td>
<td>語文</td>
<td>數學</td>
<td>英語</td>
<td>英語</td>
<td>物理</td>
<td>計算機</td>
<td rowspan="2">休息</td>
</tr>


<tr align="center">


<td>數學</td>
<td>數學</td>
<td>地理</td>
<td>歷史</td>
<td>化學</td>
<td>計算機</td>
</tr>


</table>
</body>
</html>



快速連結：

陳力：傳智播客古代 珍寶幣 泡泡龍遊戲開發第四講：html表格元素

陳力：傳智播客古代 珍寶幣 泡泡龍遊戲開發第三講：html符號實體、超連結


相關文章