200312-HTML複習-表格

參考來源:
書籍:HTML&CSS 網站設計建置優化之道
網頁前端工程入門：CSS 表格樣式 - 詳細使用介紹 By 彭彭
 HTML Table 表格
 HTML Bootstrap 4 Tables

基本表格結構

<table>:此標籤是用來製作表格，表格內容是以一列一列的方式撰寫。

<tr>:使用<tr>標籤來表示每一列的起點，下方會使用一個或多個<td>標籤，在列的結尾使用</tr>結束標記。

<td>:每個表格的儲存格是以<td>標籤來代表，在表格儲存格的結尾使用</td>結束標記。

<th>:<th>標籤的用法和<td>標籤相同，不過它是用來呈現欄或列的標題，即使儲存格內沒有內容，還是
應該使用<td>或<th>標籤來表示空白儲存格的存在，否則表格無法正確顯示。

可在<th>元素中使用scope屬性來標明標題，row為”行”的標題，col為”欄”的標題。

可用CSS去修改表格樣式，在之後的文章會有教學。

除了以上基本架構部分，還可以設定表格寬度、高度等等，以下為常用的幾種屬性:

width:控制表格寬度。
border:控制表格邊框的粗細。
background:控制背景圖片。
colspan：控制儲存格橫跨幾個欄位。
rowspan：控制儲存格垂直跨幾個欄位。

以下為簡單的練習:

<table>
  <tr>
    <th colspan="6"><center>作息時間表</center></th>
  </tr>
  <tr>
    <th></th>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
    <th>星期四</th>
    <th>星期五</th>
    </tr>
  <tr>
    <th>起床時間</th>
    <td>8:10</td>
    <td>8:05</td>
    <td>7:58</td>
    <td>8:15</td>
    <td>7:52</td>
   </tr>
   <tr>
     <th>就寢時間</th>
     <td>23:50</td>
     <td>01:20</td>
     <td>00:35</td>
     <td>01:02</td>
     <td>沒睡覺</td>
    </tr>
</table>

顯示如下:

作息時間表
	星期一	星期二	星期三	星期四	星期五
起床時間	8:10	8:05	7:58	8:15	7:52
就寢時間	23:50	01:20	00:35	01:02	沒睡覺

長表格

有三個元素可以將表格中的內容，和第一列、最後一列分開區來

<thead>:表格的標題應該放在此標籤內。

<tbody>:表格內容放在此標籤內。

<tfoot>:註腳(結尾)應該放在此標籤內。

例如:

<table>
  <thead>
     <tr>
       <th>日期</th>
       <th>收入</th>
       <th>支出</th>
     </tr>
   </thead>
   <tbody>
      <tr>
        <th>2/18</th>
        <td>1500</td>
        <td>600</td>
       </tr>
       <tr>
        <th>2/19</th>
        <td>1200</td>
        <td>800</td>
       </tr>
       <tr>
        <th>2/20</th>
        <td>2500</td>
        <td>1200</td>
       </tr>
       <tr>
        <th>2/21</th>
        <td>2400</td>
        <td>2600</td>
       </tr>
       <tr>
        <th>2/22</th>
        <td>1300</td>
        <td>1500</td>
       </tr>
   </tbody>
   <tfoot>
      <tr>
        <th>總計</th>
        <td>8900</td>
        <td>6700</td>
       </tr>
   </tfoot>
</table>

會顯示為

日期	收入	支出
2/18	1500	600
2/19	1200	800
2/20	2500	1200
2/21	2400	2600
2/22	1300	1500
總計	8900	6700