HTML5基础(六)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>能力表</title>
        <style>
            tbody tr:hover{
            background-color: black;
            color: #fff;
            }
        </style>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="10" width="400px"><!--cellspacing 单元格间距-->
            <caption>能力表</caption>
            <thead>
            <tr>
                <th>编号</th><!--th 居中-->
                <th>头像</th>
                <th>姓名</th>
                <th>能力</th>
                <th>数值</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td >101</td><!--colspan="2" 列合并-->
                <td>
                    ![](img2/page.jpg)
                </td>
                <td>鲁班</td>
                <td>防御</td>
                <td>100</td>
            </tr>
            <tr>
                <td rowspan="2">102</td><!--行合并-->
                <td rowspan="2">![](img2/page2.jpg)</td>
                <td rowspan="2">李白</td>
                <td>攻击</td>
                <td>100</td>
            </tr>
            <tr>
                <td>防御</td>
                <td>100</td>
            </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td align="center" colspan="4">综合能力:</td>
                    <td >200</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容