iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 12
3
自我挑戰組

一步一腳印,探索網頁前端設計之美系列 第 12

第十二步 - 當心表格般的陷阱(網頁清單與表格語法)

各位大家早安,祝大家中秋節快樂,我是喵橘,今天是佳節,雖然,沒什麼動力,但還是要努力寫出一篇好文章。附贈喵橘手工中秋節賀圖。

https://ithelp.ithome.com.tw/upload/images/20190913/20117282xQZsrj1XIS.png

網頁清單語法

<ul>、<ol>、<li> 標籤

編號:<ol>、<li>

顯示有順序性的清單項目,會用數字或有序列文字來進行編排。

<h3>興趣</h3>
<ol>
  <li>散步</li>
  <li>看小說</li>
  <li>聽音樂</li>
</ol>

額外補充的屬性功能

在 <ol> 元素加上 type 屬性,可以改變開頭編號的種類。

屬性名稱 說明
1 數字。
a 小寫英文字母。
A 大寫英文字母。
i 小寫羅馬數字。
I 大寫羅馬數字。

在 <ol> 元素加上 start 屬性,並在 <ol> 元素加上 value 屬性,就可以設定第一個編號數字的順序。

在 <ol> 元素加上 reversed 屬性,就可以用降冪排序的方法排列編號。

編號:<ul>、<li>

顯示無順序性的清單項目,會用符號來進行編排。

<h3>興趣</h3>
<ul>
  <li>散步</li>
  <li>看小說</li>
  <li>聽音樂</li>
</ul>

額外補充的屬性功能

<dl>、<dt>、<dd> 標籤

中文稱為定義清單,可以呈現出縮排的效果, <dt> 元素通常表示項目的標題, <dd> 元素代表項目的敘述。

<dl>
    <dt>興趣</dt>
    <dd>
        我的興趣:<br>
        寫小說、散步<br>
    </dd>
</dl>

網頁表格語法

<table>標籤

它是製作一個表格,並搭配 border 屬性,不過屬性值都是設定 1 ,假如要美化框線部分,就是要靠CSS,這之後CSS才會詳細去談論。

<td>標籤

它是代表一個表格的儲存格,並搭配 header 屬性,能讓無法瀏覽網頁的使用者可以用聆聽方式去閱讀。加入 rowspan 屬性,能縱向合併表格。加入 colspan 屬性,能橫向合併表格。

<th>標籤

它是代表一個表格內的標題,並搭配 header 屬性,能讓無法瀏覽網頁的使用者可以用聆聽方式去閱讀。搭配 addr 屬性,可在過長內容,紀載為簡略版本。

<tr>標籤

它是代表一個表格中會有一列出現。可以搭配許多屬性,搭配 height 屬性,能設定表格高度。搭配 align 屬性,設定文字的偏向位置。搭配 Valign 屬性,設定文字垂直的水平排列方式。搭配 bgcolor 屬性,設定表格顏色。

<caption>標籤

它是代表一個表格外的標題部分。

範例圖示:

	<table border = "1" align = "center">
        <caption>自我介紹</caption>
        <tr align = "center">
            <th colspan="2">喵橘敘說的一天~~</th>
        </tr>
        
        <tr align = "center">
            <td>技能</td>
            <td>寫程式</td>
        </tr>
        
         <tr align = "center">
            <td rowspan="3">興趣</td>
            <td>畫畫</td>
          </tr>
          
         <tr align = "center">
             <td>散步</td>
          </tr>      
     </table>

範例圖示:

https://ithelp.ithome.com.tw/upload/images/20190913/201172823WsFCJXeOY.png

重點整理

標籤 說明
<ul>、<ol>、<li> 清單項目的標示。
<dl>、<dt>、<dd> 定義清單,可以呈現出縮排的效果。
<table> 製作一個表格。
<td> 代表一個表格的儲存格。
<th> 代表一個表格內的標題。
<tr> 代表一個表格中會有一列出現。
<caption> 代表一個表格外的標題部分。

小測試

根據上面表格講解,把之前的自我介紹放入表格內,並整理整齊。

明天預告

今天是講解網頁清單與表格語法,明天解說連結的語法部分,謝謝大家的觀看。


上一篇
第十一步 - 找到關鍵的破解迷宮方法(整體結構內常用的標籤)
下一篇
第十三步 - 連結下一關卡的瞬間(網頁連結的語法)
系列文
一步一腳印,探索網頁前端設計之美33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

2
ccutmis
iT邦高手 2 級 ‧ 2019-09-13 10:54:25

中秋節快樂~我這邊也附上我在網路上精選的賀圖↓
https://media.tenor.com/images/1d3e261b0447150bad4aebe8de786d58/tenor.gif

2

哈哈~ 喵橘的中秋節賀圖畫的不錯哦,
我這邊也題一首小馬寫的詩:

參與鐵人賽「中」,
「秋」季挑戰自我,
若能「快」馬加鞭,
必能「樂」在其中。

祝大家中秋快樂~

我要留言

立即登入留言