HTML之Tables、Lists、Blocks

Tables

HTML的表格由<table>來定義，<tr>定義一列，<th>定義表格的Header，<td>定義每一列裡面的資料顯示。

<table>
 <tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Age</th>
</tr>
<tr>
 <td>Derrick</td>
 <td>Chao</td>
 <td>28</td>
</tr>
<tr>
 <td>Aurora</td>
 <td>Yu</td>
 <td>28ㄒ</td>
</tr>
</table>

Adding a Border

預設 Table 是沒有邊框的，可以使用 CSS property border 來做顯示。

table, th, td {
  border: 1px solid black;
}

Collapsed Borders

如果想要把 border 的顯示縮為只有一條 border 時，可用 CSS property border-collapse 來做設定。

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Adding Cell Padding

如果想要 cell 裡的內容跟 border有些間隔，可用 CSS property padding 來做設定。

th, td {
  padding: 5px;
}

Left-align Headings

預設 Table 的 Headings 是粗體＋置中，如果要靠左對齊可用 CSS property text-align 來設定。

th {
  text-align: left;
}

Adding Border Spacing

調整 cell 之間的間隔可以使用 CSS property border-spacing 來做設定。

table {
  border-spacing: 5px;
}

Cells that Span Many Columns

讓 cell 展開多個相同的 column 欄位，可使用 html attribute colspan 來設定。

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Cells that span Many Rows

讓 cell 展開多個相同的 Row 欄位，可使用 html attribute rowspan來設定。

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Adding a Caption

幫 Table 的上方增加一個標題，可使用 html attribute caption來設定。

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

A Special Style for One Table

透過 id attribute 可以為某個 table 設定自己的 style。

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

table#t01 {
    width: 100%; 
    background-color: #f1f1c1;
}
table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}

Lists

List 主要有分為兩種格式:

• Unordered List
• Ordered List

我們先來看 Unordered List

Unordered List Syntax

Unordered List 是由 <ul> 標籤來開始，而每一個 item 則是由 <li> 標籤來開始。

<ul>
  <li>Swift</li>
  <li>Objective-C</li>
  <li>Java</li>
</ul>

Choose List Item Marker

設定 CSS property list-style-type 可以定義不同的 list item marker。

Value	Description
disc	Sets the list item marker to a bullet (Default)
circle	Sets the list item marker to a circle
square	Sets the list item marker to a square
none	The list items will not be marked

Example:

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered List Syntax

Ordered List 是由 <ol> 標籤來開始，而每一個 item 則是由 <li> 標籤來開始。

<ol>
  <li>Coffee</li>
  <li>Latte</li>
  <li>Water</li>
</ol>

The Type Atrribute

Type atrribute 使用在 <ol> 標籤之中，可以定義要使用的 list item marker。

Type	Description
type = “1”	The list items will be numbered with numbers (Default)
type = “A”	The list items will be numbered with uppercase letters
type = “a”	The list items will be numbered with lowercase letters
type = “I”	The list items will be numbered with uppercase roman numbers
type = “i”	The list items will be numbered with lowercase roman numbers

Example:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Description List

Description list 是個一包含許多術語(term)和術語的敘述的列表。
<dl> 定義一個 description list，<dt> 定義 term的名稱，<dd>描述每一個 term。

<dl>
  <dt>Objective-C</dt>
  <dd>- A Programming language for iOS App</dd>
  <dt>Java</dt>
  <dd>- A Programming language for Android App</dd>
</dl>

Nested Lists

List 可以巢狀顯示。

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Horizontal Lists

List 的 style 可以透過 CSS 有許多種的變化。
以下是 Horizontal List的範例：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Blocks

每一個 HTML Element 有預設的顯示方式，顯示方式分為兩種

• Block
• inline

Block-level Elements

Block-level 的 elements 會佔滿螢幕寬度一整行的空間來顯示。例如以下幾個elements:

• <div>
• <h1> - <h6>
• <p>
• <form>

inline Elements

inline 的 elements 不會佔滿整行而只是佔滿它所需要的顯示範圍的空間。
例如以下幾個elements:

• <span>
• <a>
• <img>

div Element

<div> 是一個容器用來裝其他的 HTML Elements，常使用 style 和 class 兩個屬性。

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

span Element

<span> 是一個容器用來裝文字，也是常使用 style 和 class 兩個屬性。

<h1>My <span style="color:red">Important</span> Heading</h1>