HTML5零基础-10-表格_html10*10的单元格怎么写-优快云博客

本文链接：https://blog.youkuaiyun.com/quirkmask/article/details/118667759

本文介绍了HTML表格的基本结构，包括table、tr、td和th元素，以及表格的属性如border、width、height和align。同时，重点讲解了如何通过colspan和rowspan属性实现单元格的横向和纵向合并，以及css样式border-collapse用于合并边框的方法。示例代码展示了表格的创建和单元格合并的实际应用。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<!--
    表格
        table  表示表格
            tr      表示表格中的行 (每一行可以包含一个或多个td/th)
            td      表示表格中标准单元格
            th      表示表格中的表头(具有标题的效果 字体加粗 居中)

        table常用属性
            border 表格的边框
            width   表格的宽度
                    像素或者百分比(如果是百分比,参考的是上一级元素的宽度,如果上一次元素未设置,则参考屏幕宽度)
            height 表格的高度
            align   表格的对齐方式(left right center)
        tr 常用属性
            align 每行中文本内容的水平方向对齐方式(left right center)
            valign 每行中文本内容的垂直方向对齐方式
            bgcolor 行的背景颜色

        css样式
            border-collapse: collapse 合并表格边框

            合并单元格
                <td>的colspan和rowspan分别规定单元格横跨的列数和行数
                纵向合并 rowspan
                横向合并 colspan
-->
<body>
    <table border="1" width="500px" style="border-collapse: collapse" align="center" >
        <tr>
            <th>班级</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr align="center">
            <td rowspan="2">101班</td>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr align="center">
            <td>张三</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr align="center">
            <td>101班</td>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
        </tr>

    </table>
</body>
</html>