iT邦幫忙

0

[鼠年全馬鐵人挑戰] Week18 - 超新手學前端 - HTML table 小概念

  • 分享至 

  • xImage
  •  

又過了一周啦~
最近開始學習如何用 table 排版,在學習的過程中順手記下筆記讓自已更有概念:)

何謂table

table 是在 HTML 排版的一種方式,主要是用於表格的呈現,也是一種很常見的排版方式之一。
表格的用法包含了幾個重要的標籤,分別是 table、tr 與 td 這幾個重點,組合起來才是個完整的表格,

寫法範例

<table width="200" border="1">
 <tr>
 <td>疫情大解封</td>
 <td>還是要小心</td>
 </tr>
</table>

第一個 table 的 width 是指設定寬度,border 是指框線樣式,幾個<td></td>就會有幾個欄位

https://ithelp.ithome.com.tw/upload/images/20200607/20120789P2ljKu4QbK.png

如果 border 後面數字增加則會變成:

<table width="200" border="10">
 <tr>
 <td>疫情大解封</td>
 <td>還是要小心</td>
 </tr>
</table>

https://ithelp.ithome.com.tw/upload/images/20200607/20120789c51mfNoMTu.png

數字越大,框線更粗

<table border="1">
 <tr>
 <td>第一行的第一個欄位</td>
 <td>第一行的第二個欄位</td>
 </tr>
 <tr>
 <td>第二行的第一個欄位</td>
 <td>第二行的第二個欄位</td>
 </tr>
</table>

https://ithelp.ithome.com.tw/upload/images/20200607/20120789egqnKt6OwT.png

這裡是指兩行兩欄位的 Table 表格

其實表格的變化還很多,可以依照需求去做設計
覺得很有趣,再來多多練習:)
大家下次見啦~~!!!


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言