iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
自我挑戰組

從零開始前端學習(HTML、CSS、JavaScript) 系列 第 2

Day 02 HTML<表格標籤>

表格標籤主要用來顯示以及展示數據,可用表格標籤排版後讓數據更容易閱讀

1. 表格基礎標籤簡易介紹 ( 以code表示 ) :

<table> 表示表格的開始直到結束
<tr> 表示行 此為第一行 
<!-- 表頭單元格會自動加粗以及垂直置中 -->
<th>表頭單元格...1</td> 表示此行內的第1個表頭單元格 
<th>表頭單元格...2</td> 表示此行內的第2個表頭單元格
</tr>
<tr> 表示行 此為第二行  
<td>...1</td> 表示此行內的第1個單元格 
<td>...2</td> 表示此行內的第2個單元格
</tr>
</table> 

2. 表格其他相關屬性介紹 : 

表格相關屬性 請打開此codepen連結

語法範例 :

<!-- 表格開始 -->
 <table border="1px">
     <!-- 此tr表示第一行 -->
     <tr>
         <th>
             表頭單元格1
         </th>
         <th>
             表頭單元格2
         </th>
         <th>
             表頭單元格3
         </th>
     </tr>
     <!-- 此tr表示第二行 -->
     <tr>
         <td>
             表格內單元格4
         </td>
         <td>
             表格內單元格5
         </td>
         <td>
             表格內單元格6
         </td>
     </tr>
     <!-- 此tr表示第三行 -->
     <tr>
         <td>
             表格內單元格7
         </td>
         <td>
             表格內單元格8
         </td>
         <td>
             表格內單元格9
         </td>
     </tr>
 </table>
 <!-- 表格結束 -->

以上範例展示結果

3. 表格結構標籤 :

<thead>標籤表格的頭部區域
<tbody>標籤表格的主體區域
<tfoot>標籤表格的底部區域

W3school 說明

表格結構標籤因有瀏覽器問題所以知道就好(codepan)

4. 合併單元格
合併單元格方式:

跨行合併 rowspan="合併單元格的個數"
跨列合併 colspan="合併單元格的個數"

合併單元格的步驟:
1.先確定需要跨行合併還是跨列合併
2.找到目標單元格 寫上所需要的合併方式以及需要合併的數量
EX:<td rowspan="2">...</td>
3.刪除多餘的單元格

合併單元格範例


上一篇
Day 01 HTML<常用標籤>
下一篇
Day 03 HTML<列表標籤>
系列文
從零開始前端學習(HTML、CSS、JavaScript) 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言