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>

这里写图片描述

Html学习笔记5：表格标签的使用

猜你喜欢