Html學習筆記5:表格標籤的使用

表格標籤:

<table> </table>  表格標籤

   屬性:
    border  表格的邊框  默認是沒有的
    Width=”“  表格的寬度
    Height=”“  表格的高度
    Align=”“  取值 left(默認),center 居中,right 表格右邊
    Cellspacing=”“  邊框到內容的大小 一般設置爲0
    Cellpadding=”“  內容到邊距的填充
注意:如果盒子裏面的內容過多會導致盒子變大

<tr></tr>  行標籤

Height  行高
Align  文字水平方向的位置
    left 左邊,center 居中,right 右邊
Valign  文字垂直方向的位置
    top 頂部,middle 居中,bottom 底部

<th></th> 標題列標籤
<td></td>  列標籤

建立一個表格(有固定長度的表格)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格元素</title>
</head>
<body>
<table border="1">
    <tr>
        <td>張三</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>王五</td>
        <td></td>
        <td>已婚</td>
    </tr>
</table>
<br>
<table border="1" style="width: 300px;">
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>張三</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>王五</td>
        <td></td>
        <td>已婚</td>
    </tr>
</table>
</body>
</html>

這裏寫圖片描述

橫向合併和縱向合併單元格

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>合併單元格</title>
</head>
<body>
<table border="1" style="width: 300px;">
    <tr>
        <th rowspan="5">基本情況</th>
        <th>姓名</th>
        <th>性別</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>張三</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>王五</td>
        <td></td>
        <td>已婚</td>
    </tr>
    <tr>
        <td colspan="3">合計:共3人</td>
    </tr>
</table>
</body>
</html>

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章