HTML表格应用技巧-优快云博客

本文详细介绍HTML表格元素的应用，包括如何创建表格、设置边框、调整单元格间距、使用标题、合并单元格等，通过实例展示如何使表格更具可读性和美观性。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--1. table 申明一张表格-->
<!--border属性  添加边框-->
<!--cellspacing属性  单元格之间的间距-->
<!--cellpadding属性  内容和单元格的间距-->
<table border="1px" cellspacing="1px" cellpadding="0px" style="width: 500px;height: 200px">

    <!--tr标签 是一行-->
    <tr>
        <!--th标签 列标题-->
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
        <th>简介</th>
    </tr>
    
    <!--2.1 align属性  设置水平位置：center居中  left靠左(默认)  right靠右-->
    <tr  align="right">
        <!--td标签 一个单元格-->
        <td>1</td>
        <td>孙志鹤</td>
        <td>18</td>
        <td>学习</td>
        <td>it大神</td>
    </tr>

    <!--2.2 valign属性 设置竖直位置：默认居中，top靠上  bottom靠近底部 -->
    <tr valign="bottom">
        <td>2</td>
        <td>刘文博</td>

        <!--2.3 rowspan合并行-->
        <td rowspan="2">22</td>
        <td>篮球</td>
        <td>运动健将</td>
    </tr>


    <tr>
        <td>3</td>
        <td>于光坤</td>
        <!--colspan合并列-->
        <td colspan="2">游泳</td>
    </tr>

</table>


</body>
</html>