iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 27
0
自我挑戰組

自我挑戰日記系列 第 27

HTML:table 表格

大家好 /images/emoticon/emoticon37.gif

今天要作 HTML 的表格
最基本的表格作法是

<table>
    <tr>
        <td>科目</td>
        <td>成績</td>
    <tr>
    <tr>
        <td>國語</td>
        <td>75分</td>
    <tr>
</table>

https://ithelp.ithome.com.tw/upload/images/20180101/20107496tDDZyUB1wE.jpg
作出來就會像上圖
再加上一個表格的大標題 caption 放在 table 之中

<table>
    <caption>王小明考試成績</caption>
</table>

https://ithelp.ithome.com.tw/upload/images/20180101/20107496FnM21PReBE.jpg
還沒給表格一個寬度
所以標題縮成一團了
設定表格的外框和距離
要寫在 table 中

<table border= 10 width= 200px cellpadding= 5 cellspacing= 10>
    <caption>王小明考試成績</caption>
</table>

https://ithelp.ithome.com.tw/upload/images/20180101/20107496Uu3L5pHzOa.jpg
border 是外框的厚度,0 是無框線
cellpadding 表格的內距
cellspacing 表格的格子與格子之間的距離
在 table 中
都是先用代表列的 tr 包底下的欄位 th、td

<table border= 1>
    <tr>
        <th>科目</th>
        <th>成績</th>
    <tr>
    <tr>
        <th>國語</th>
        <td>75分</td>
    <tr>
</table>

https://ithelp.ithome.com.tw/upload/images/20180101/20107496gI3Cuw1RXU.jpg
th 預設是粗體置中,主要用在表格標題
還可以給每個格子的 tr、th、td 各自的文字顏色、背景

    <tr>
        <tr bgcolor=pink>科目</tr>
        <td background="bg.jpg">成績</td>
    <tr>

https://ithelp.ithome.com.tw/upload/images/20180101/20107496lgG8H1YOzO.jpg
用在 tr 就會整列同色
用在 th、td 就是單格變色
文字的對齊方式 用在 th、td

align= "left|center|right"   <!-- 水平對齊 -->
valign= "top|middle|bottom|baseline"   <!-- 垂直對齊 -->

https://ithelp.ithome.com.tw/upload/images/20180101/20107496SnfH8el0sD.jpg
遇到需要合併格子時
用 th、td 作合併
水平合併 colspan
垂直合併 rowspan

<table border= 1 width= 300px cellpadding= 3 cellspacing= 3>
<caption>水平合併2個欄位</caption>
<tr>
  <th>姓名</th>
  <th colspan="2">電話</th>
</tr>
<tr>
  <td>小明</td>
  <td>02-2345-6789</td>
  <td>0987-654321</td>
</tr>
</table>
<br>
<table border= 1 width= 300px cellpadding= 3 cellspacing= 3>
<caption>垂直合併2個欄位</caption>
<tr>
  <th>姓名</th>
  <td>小明</td>
</tr>
<tr>
  <th rowspan="2">電話</th>
  <td>02-2345-6789</td>
</tr>
<tr>
  <td>0987-654321</td>
</tr>
</table>

https://ithelp.ithome.com.tw/upload/images/20180101/20107496fDNLPATPeE.jpg

表格的外框用 frame 指定可見的邊線
https://ithelp.ithome.com.tw/upload/images/20180101/20107496hIpyRnT1Bc.jpg

<table frame = "value">
frame = void|above|below|hsides|vsides|lhs|rhs|box|border

表格內 rules 指定可見的邊線
https://ithelp.ithome.com.tw/upload/images/20180101/201074961XTDRfW7cC.jpg

<table rules = "value">
rules = none|groups|rows|cols|all

--- 明日待續。


上一篇
CSS:column 瀑布流版型
下一篇
CSS:table 表格
系列文
自我挑戰日記30

尚未有邦友留言

立即登入留言