HTML基礎知識6-表格標籤

你的歡歡發表於2020-12-15
HTML

表格標籤

  1. 表格的主要作用
    表格主要用於顯示以及展示資料
  2. 表格的基本語法
<table> 
        <tr>
        	<th>內容</th>
        	<th>內容</th>
        	..............
        </tr>
    </table>

<table></table>是用於定義表格的標籤

<tr></tr>是用於定義表格中的行

 <td></td>是用於定義表格中的單元格
  1. 表頭單元格標籤
    一般表頭單元格位於表格第一行或第一列，表頭單元格里面的內容會加粗顯示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格標籤</title>
</head>
<body>
    <table> 
        <tr><th>姓名</th> <th>性別</th> <th>年齡</th></tr>
    </table>
</body>
</html>

如圖所示：
在這裡插入圖片描述

  1. 例項
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border="1" cellpadding="20" cellspacing="0">
        <tr>
            <th>排名</th>
            <th>書名</th>
            <th>趨勢</th>
            <th>月票</th>
            <th>連結</th>
        </tr>
        <tr>
            <td>1</td>
            <td>萬族之劫</td>
            <td>上升</td>
            <td>63959</td>
            <td><a href="https://book.qidian.com/info/1018027842" target="_blank">連結</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>大奉打更人</td>
            <td>上升</td>
            <td>33343</td>
            <td><a href="https://book.qidian.com/info/1019664125" target="_blank">連結</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>我真的是正派啊</td>
            <td>上升</td>
            <td>18640</td>
            <td><a href="https://book.qidian.com/info/1015710955" target="_blank">連結</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>我只會拍爛片</td>
            <td>上升</td>
            <td>15098</td>
            <td><a href="https://book.qidian.com/info/1016477783" target="_blank">連結</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>魔臨</td>
            <td>上升</td>
            <td>12541</td>
            <td><a href="https://book.qidian.com/info/1016560323" target="_blank">連結</a></td>
        </tr>
    </table>
</body>
</html>

如圖所示：
在這裡插入圖片描述

相關文章