02 HTML标签（表格标签table）【尚硅谷JavaWeb教程】

Blueming_first

已于 2023-01-30 13:14:48 修改

阅读量76

点赞数

分类专栏： JavaWEB 文章标签： html 前端 javascript

于 2023-01-27 14:39:07 首次发布

本文链接：https://blog.csdn.net/Cypresszky/article/details/128770644

版权

JavaWEB 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

表格标签

JAVAWEB的学习笔记
学习视频来自：https://www.bilibili.com/video/BV1AS4y177xJ/?vd_source=75dce036dc8244310435eaf03de4e330

表格 table
行 tr
列 td
表头列 th

和美观相关的html格式已被淘汰，现在更多的使用css格式）
- border：表格边框的粗细
- width：表格宽度
- cellspacing：单元格间距
- cellpaddin：单元格填充
tr中有一个属性：align -> center， left， right

rowspan 行合并
colspan 列合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--网页的标题-->
    <title>表格标签的学习</title>
    <meta charset="UTF-8"> <!--编码不一致会出现乱码-->

</head>
<body>
    <table border="1" width="600" cellspacing="0" cellpadding="4">
        <tr align="center"> <!--align="center" 居中-->
            <th>姓名</th>
            <th>门派</th>
            <th>成名绝技</th>
            <th>内功值</th>
        </tr>
        <tr align="center">
            <td>乔峰</td>
            <td>丐帮</td>
            <td>少林长拳</td>
            <td>5000</td>
        </tr>
        <tr align="center">
            <td>虚竹</td>
            <td>林九宫</td>
            <td>北冥神功</td>
            <td>15000</td>
        </tr>
        <tr align="center">
            <td>扫地僧</td>
            <td>少林寺</td>
            <td>七十二绝技</td>
            <td>未知</td>
        </tr>
    </table>
    <table border="1" cellpadding="4" cellspacing="0" width="600">
        <tr align="center">
            <th>名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        <tr align="center">
            <td>苹果</td>
            <td rowspan="2">5</td> <!--跨2行-->
            <td>20</td>
            <td>100</td>
            <td><img src="static/imgs/del.jpg" width="24" height="24"></td>
        </tr>
        <tr align="center">
            <td>菠萝</td>
            <td>15</td>
            <td>45</td>
            <td><img src="static/imgs/del.jpg" width="24" height="24"></td>
        </tr>
        <tr align="center">
            <td>香蕉</td>
            <td>6</td>
            <td>6</td>
            <td>36</td>
            <td><img src="static/imgs/del.jpg" width="24" height="24"></td>
        </tr>
        <tr align="center">
            <td>总计</td>
            <td colspan="4">181</td> <!--跨4列-->

        </tr>
    </table>
</body>
</html>
<!--
17) 表格  table
    行   tr
    列   td
    表头列 th

    和美观相关的html格式已被淘汰，现在更多的使用css格式）
        - border：表格边框的粗细
        - width：表格宽度
        - cellspacing：单元格间距
        - cellpaddin：单元格填充
    tr中有一个属性：align -> center， left， right

    rowspan 行合并
    colspan 列合并
-->