网站（四）HTML5表格元素

关注

原创最新推荐文章于 2026-03-29 10:29:51 发布 443 阅读 AI 写同款· GEO 优化 ›

【毕业设计之html系列】基于html5的动物领养网站基于HTML5技术的动物领养网站是一个为流浪动物提供领养服务的在线平台，用户可以通过该平台了解流浪动物的信息、领养流程、领养后的注意事项等内容，并进行在线领养申请。该网站使用HTML5、CSS3、JavaScript等技术实现了响应式布局、动态效果、数据交互等功能，提供了更好的用户体验。基于HTML5技术的动物领养网站可以为流浪动物提供更多的机会，让更多的人关注和参与到动物保护事业中来。同时，该网站也为用户提供了方便快捷的领养服务，让用户更加容易地找到自己心仪的宠物。阅读详情

HTML5表格元素

表格三大元素

table
tr
td

表格常用元素

border：边框
align：对齐模式
colspan：合并行单元格
rowspan：合并列单元格

<!DOCTYPE html>  <!--让浏览器得知自己要处理的内容是html--> 
<!--这是注释-->

<html len="zh"><!--文档中html部分的开始， language = 简体中文-->

<head><!--提供有关文档内容和标注信息的-->

    <meta charset="UTF-8"><!--用UTF-8的方式将网页进行编码-->

    <title>Title</title><!--标题-->
</head>

<body>
<table border = "1px" align = "center"> <!--border边框，align对齐模式-->
    <thead>
    <tr>
        <th>Admin</th> <!--th为表格标题-->
        <th>Sex</th>
        <th>Password</th>
    </tr>
    </thead>
    <tbody>
    <tr><!--一行-->
        <td>Saber</td><!--td表示一列-->
        <td>Female</td>
        <td>I am king of eating!</td>
    </tr>
    <tr>
        <td>Lancer</td>
        <td>Male</td>
        <td>Luck E!</td>
    </tr>
    </tbody>
    <tfoot>
        <td>Admin</td>
        <td>Sex</td>
        <td>Password</td>
    </tfoot>
</table>

<br>
<table border="1px" align="center">
    <tr>
        <th rowspan = "2">I love study!</th>
        <th>I love study!</th>
        <th>I love study!</th>
        <th>I love study!</th>
    </tr>
    <tr>
        <td colspan="2">I love study!</td>
        <td>I love study!</td>
    </tr>
    <tr>
        <td>I love study!</td>
        <td>I love study!</td>
        <td>I love study!</td>
        <td>I love study!</td>
    </tr>
</table>
</body>
</html>