Hello WEB ！ HTML来咯（二）--表格

最新推荐文章于 2023-12-02 13:35:40 发布

Padaz

最新推荐文章于 2023-12-02 13:35:40 发布

阅读量72

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45160152/article/details/119349927

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

网盘资料链接：https://pan.baidu.com/s/1qFRLUOS-d3Ns3_avzXRrhw
提取码：echo

表格<table>:
表格标签描述
<table> 表格
<caption> 表格标题
<th> 表格的表头
<tr> 表格的行
<td> 表格的单元格
<thead> 表格的页眉
<tbody> 表格的主体
<tfoot> 表格的页脚

<table>、<tr>、<td> 是表格必备的

标签属性:
width:宽
height:高
border:边框 (直接写数值)
align:对齐方式 (left\right\center)
cellspacing:单元格间距
cellpadding:单元格边距
bgcolor:表格背景颜色
background:表格的背景图片(<td>)

表结构【了解】：对HTML表格中的内容进行分组
<thead> 表格的页眉
<tbody> 表格的主体
<tfoot> 表格的页脚

注意：<thead>内部一定要有<tr>行标签

*合并表格：
跨行合并:rowspan,保留上面的单元格，删除下面的
跨列合并:colspan，保留左边的单元格，删除右边的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格、表单</title>
    <style>

    </style>
</head>

<body>
<!--table的align是页面居中-->
<table>
    <!--标题按照表的宽度-->
    <caption>表格标题</caption><!--标题-->

    <tr align="center">

        <!--表头th黑体加粗居中-->
        <th>姓名</th><!--表头-->
        <th>年龄</th>
        <!--跨行colspan-->
        <th colspan="2">性别</th>
    </tr>
    <tr align="center" >
        <td>andy</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr align="center">
        <td>cool</td>
        <td>20</td>
        <!--跨列rowspan-->
        <td rowspan="2"></td>
    </tr>


</table>
<!--表结构-->
<table>
    <!--表格的页眉-->
    <thead>
        <tr>
            <th>商品</th>
            <th>价格</th>
        </tr>
    </thead>
    <!--表格的主体-->
    <tbody>
        <tr>
            <td>手机</td>
            <td>￥400</td>
        </tr>
        <tr>
            <td>电脑</td>
            <td>￥600</td>
        </tr>
    </tbody>
    <!--表格的页脚-->
    <tfoot>
        <tr>
            <td>总计</td>
            <td>1000</td>
        </tr>
    </tfoot>
</table>




</body>
</html>