Html元素-清單&表格(DAY4)

2021 iThome 鐵人賽

DAY 4

Modern Web

網頁前端基礎&Vue.js系列第 4 篇

13th鐵人賽

Vince

2021-09-17 14:53:18

730 瀏覽

建立清單或表格的用意，可以把資料排序得更加整齊，讓人一看到就能淺顯易懂，若想要讓資料更方便閱讀或是有條理地呈現，就可以使用這些元素。

清單

清單可以分為兩種，分別是「無排序的清單」和「排序的清單」。

無排序的清單`<ul></ul>`

<li> 元素為要條列出的資料

<ul>
    <li>為排序的清單 </li>
    <li>computer</li>
    <li>mouse</li>
    <li>audio</li>
</ul>

排序的清單`<ol></ol>`

<ol type="A">
        <li>排序清單</li>
        <li>computer</li>
        <li>mouse</li>
        <li>audio</li>
</ol>
<!--type屬性可以是"1"、"A"、"a"等等-->

在上方程式碼有看到一個的標籤，它是註解符號，不會呈現在網頁上，是用來讓自己或是其他編輯程式碼的人了解這段程式碼的用意。

表格

在表格中，我們定義這個區塊為表格，必須使用<table></table>元素來包裝整格表格的架構和其他與表格相關的元素，那這些與表格相關的元素有哪些呢!
以下介紹比較重要的幾種元素和屬性。
表格基本元素:
<tr>:表格的橫列
<td>:表格的直行
<th>:表格的直行，文字粗體
<caption></caption>:表格標題
結構化表格元素:
<thead></thead>:表頭區塊
<tbody></tbody>:表的內容區塊
<tfoot></tfoot>:表尾區塊

表格屬性:
border:表格框線粗細
colspan:橫向合併儲存格
rowspan:直向合併儲存格

<body>
    <table border="1">
        <caption>基本資料表</caption>
        <tr>
            <td rowspan="5"><img src="doraemon.jpg" width="150" height="200" /></td>
        </tr>
        <tr>
            <td>姓名</td><td>Jeff</td>
        </tr>
        <tr>
            <td>年齡</td><td>34</td>
        </tr>
        <tr>
            <td>運動</td><td>游泳、網球、羽球</td>
        </tr>
        <tr>
            <td>才藝: 鋼琴、小提琴</td><td>鋼琴、小提琴</td>
        </tr>
    </table>
</body>

這樣就完成一張表了，當然表格的元素和屬性還有很多，像是表格的背景顏色bgcolor、儲存格與表格邊框距離cellpadding、儲存格之間的距離cellspacing以及讓資料在表格中對齊的屬性:
align="center"置中水平對齊
align="left"靠左水平對齊
align="right"靠右水平對齊
vertical-align="central"置中垂直對齊
vertical-align="top"靠上垂直對齊
vertical-align="buttom"靠下垂直對齊