HTML--表格

零时搞学习

于 2024-01-13 17:26:57 发布

阅读量1.2k

点赞数 18

分类专栏： HTML学习文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/weixin_44517278/article/details/135572172

版权

表格的基本结构

表格标题：caption
表格：table标签
行： tr标签
单元格：td标签

语法：

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
</head>
<body>
    <table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>小黑</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小白</td>
            <td>不详</td>
        </tr>
    </table>

</body>
</html>

效果：
在这里插入图片描述
扩展：这样搞出来的没有表格的线，如何添加线呢？

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        table,tr,td{
     border: 2px solid silver;}
    </style>
</head>
<body>
    <table>
        <caption>这是表格的标题</caption>
        <tr>