html table标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格</title>
    </head>
    <body>
        <!-- 
            table 表格
            tr 行
            td 列
            th 表头列 自动加粗且居中
         -->
         <!--
            table的属性
                border 控制有无边框
                width 表格的宽度
                cellspacing 单元格间距 单元格和单元格间的间隙
                cellpadding 单元格填充 内容和边框的距离
                这些都被淘汰了,用css控制
        -->
        <!--
            tr的属性
                align:center left(default) right
                淘汰了
        -->
        <table border="1" width="300" cellspacing="3" cellpadding="3">
            <tr><th>Header</th></tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>one</td>
                <td>tow</td>
                <td>three</td>
            </tr>
            <!-- align="center" 居中 -->
            <tr align="center">
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        
        <!-- 加条直线 -->
        <hr />
        
        <table border="1" cellspacing="2" cellpadding="4" width="400">
            <tr>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
                <th>学校</th>
                <th>操作</th>
            </tr>
            <tr align="center">
                <td>张三</td>
                <td>01</td>
                <td>x2005-1</td>
                <td>std</td>
                <td>修改 删除</td>
            </tr>
            <tr align="center">
                <td>李四</td>
                <td>02</td>
                <td>x2005-1</td>
                <td>std</td>
                <td>修改 删除</td>
            </tr>
            <tr align="center">
                <td>王五</td>
                <td>03</td>
                <td>x2005-1</td>
                <td>std</td>
                <td>修改 删除</td>
            </tr>
        </table>
        
        
    </body>
</html>

 

posted @ 2022-03-08 20:19  行呗  阅读(37)  评论(0)    收藏  举报