iT邦幫忙

2024 iThome 鐵人賽

DAY 8
0

今天要學習的是表格標籤

功用是讓網頁呈現的文字表格化,使瀏覽者更容易讀取或比較資訊。

<table>標籤

標籤內寫入表格的結構和內容。

<tr>標籤

table row 的縮寫,用於設定表格的行數。

<th>標籤

table heading 的縮寫, 標籤內寫入的內容會呈現粗體置中。

<td>標籤

table data的縮寫,寫入表格的資料在<tr>標籤內,用於設定表格的欄數或列數。

接下來介紹表格的格式

表格的背景樣式該如何更改?
<table>標籤中加入bgcolor屬性,功用是更改表格背景顏色或圖片。
若要更改表格欄位的背景色,則在或標籤中加入bgcolor屬性。
表格的寬度、框線、間距
以下介紹一些屬性來設定樣式:

  • width設定表格的寬度(像素)或比例
  • bordercolor設定框線顏色
  • border設定框線粗細
  • cellpadding設定表格欄位文字與框線的間距
  • cellspacing設定表格欄位的間距

表格的對齊
與昨日學習到的圖片對齊雷同,利用align與valign屬性,其中每個<tr><td>都能設定這兩個屬性,達到表格對齊的效果。

最後介紹表格標題標籤

<caption>標籤

功用是寫入表格的標題名稱。


上一篇
Day7 圖片標籤
下一篇
Day9 實作範例 &顏色RGB
系列文
新手踏入網頁前端的世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言