HTML学习之路05-table标签-优快云博客

本文介绍了如何使用HTML创建基本表格，并展示了如何通过rowspan和colspan属性实现单元格的合并，同时还提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Table 标签</title>
    </head>
    <body>
        <center>员工信息表</center>    <!-- 使文字居中 -->
        <br />                      <!-- 换行 -->
        <hr color="red" />          <!-- 画一条红色横线 -->

        <!-- 制作一个table表格
            tr:table row    table的行
            td:table data   table的列
            th:table head   table的偷         
            border:设置表格的边框
            align:设置表格的位置       也可以用于行和列设置文字的位置
            width:设置表格的宽度    -----宽度和高度既可以用像素如  border=“1px”
            height:设置表格的高度  -----也可以用百分比的形式如    width=“50%”,即表格占浏览器的50%


         -->

        <table border="1px" width="50%" height="30%" align="center">

            <thead>
                <tr>    
                    <th>姓名</th>
                    <th>性别</th>
                    <th>职位</th>
                </tr>
            </thead>

            <tbody align="Center">
                <tr>
                    <td>张三</td>
                    <td>男</td>
                    <td>经理</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>男</td>
                    <td>员工</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>男</td>
                    <td>员工</td>
                </tr>   
            </tbody>

            <tfoot align="Center">
                <tr>
                    <td>表脚</td>
                    <td>表脚</td>
                    <td>表脚</td>
                </tr>
            </tfoot>


        </table>

    </body>
</html>

效果图如下
这里写图片描述

行列合并

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表合并</title>
    </head>
    <body>
        <!-- 
            行合并：在列标签里添加rowspan
                 rowspan="2":合并两行的一列

            列合并：colspan
         -->


        <table border="1" width="50%" height="50%" align="center">
            <thead> 
            </thead>
            <tr>
                <td>1</td>
                <td>2</td>
                <td rowspan="2">3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>

            </tr>
            <tr>
                <td colspan="2">7</td>
                <td>9</td>
            </tr>

        </table>





    </body>
</html>