HTML(7)表格制作

2020-10-22

制作静态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <center>
        <h1>前端技术阶段划分标准</h1>
    </center>
    <!-- 表格用table标签,每一个横行用tr表示,每一个竖行用td表示 -->
    <!-- border标签设置边框的宽度 -->
    <!-- cellspacing表示单元格宽度 -->
    <!-- align=center给整个表格屏幕居中 -->
    <table align="center" border="1px" cellspacing="0">
        <!-- 我们有两种办法来控制表格的列宽度,使用col标签,或者在每一个td中增加宽度 -->
        <!-- 第一列的宽度 -->
        <col width="150px">
        <!-- 第二列的宽度,以此类推 -->
        <col width="300px">
        <tr>
            <td></td>
            <td>初级</td>
            <td>中级</td>
            <td>高级</td>
            <td>专家</td>
        </tr>
        <!-- 居中的话我们可以使用align=center -->
        <tr align="center">
            <td>标准</td>
            <td>被产品对的说不出话</td>
            <td>跟产品不相上下</td>
            <td>把产品对的说不出话</td>
            <td>把产品对到辞职</td>
        </tr>
        <tr>
            <td>用户A</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>用户B</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

效果图

image.png


标题:HTML(7)表格制作
作者:张范
地址:http://misterzhang.top/articles/2020/10/22/1603350006432.html