iT邦幫忙

2025 iThome 鐵人賽

DAY 6
0

表格能夠幫我們條理分明地安排網頁上的資料,是構成許多網頁版面的基礎。HTML 常用來建立表格的標籤有下面這些:
<table> :表示表格的開始和結束
<caption> :表示表格的標題
<thead> :表示表頭內容
<tbody> :表示表身內容
<tfoot> :表示表尾內容
<tr> :增加表格列
<th> :表示表格中的標題
<td> :表示表格中的表格欄

表格位置

align 屬性 (水平對齊):想要水平靠左為left水平靠中center水平靠右則是right
valign 屬性 (垂直對齊):想要垂直靠上top垂直置中middle垂直靠下則是bottom

合併儲存格

colspan水平合併儲存格
格式:colspan="數量"
colspan="2"這個表示這一行開始水平往右合併2行
rowspan 垂直合併儲存格
格式:rowspan="數量"
rowspan="3"這個表示從這一列垂直往下合併3列

表格線

在無使用css情況下讓表格的格線依然可見,需要在<table>標籤加上了 border="1" 這個基本屬性

表格的標題

<caption>部門員工名單</caption>

表頭內容

thead>
      <tr>
        <th>姓名</th>
        <th>職位</th>
        <th>分機號碼</th>
      </tr>
    </thead>

表身程式碼

<tbody>
      <tr>
        <td>高木</td>
        <td>專案經理</td>
        <td>#一零一</td>
      </tr>
      <tr>
        <td>艾米麗可</td>
        <td>前端工程師</td>
        <td>#一零二</td>
      </tr>
    </tbody>

成品

https://ithelp.ithome.com.tw/upload/images/20250917/20178756EDwpm9aftO.png


上一篇
Day - 05 HTML項目列表清單
下一篇
DAY07 - HTML表單
系列文
從骨架到靈魂:網頁構成三部曲8
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言