表格标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
<!--
    需求1:显示一个三行四列的标签
    <table>:定义一个表格
        <tr>:行
        <td>:列
        <th>:表头(加粗效果)
        <thead>:把表头包裹
        <tbody>:把表头包裹
        <tfoot>:脚的部分
        
        <border>:决定表格的边框
        cellspacing:是单元格之间的间距
        
            
    需求2:给当前表格添加一个标题
        <caption>:表格的标题,自动居中
    需求3:合并张三和李四的性别 合并行
        <rowspan>:取值:合并N行,就取N,同时依次删除N-1个单元格
    需求3:合并张三的姓名和年龄 合并列
        <colspan>:取值:合并N行,就取N,同时删除tr下N-1个单元格
    
-->        
    <table border="1" cellspacing="0" " width="400px";">
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>电话</th>
        </tr>
        <tr>
            <td colspan="2">张三 18</td>
            <td rowspan="2">男</td>
            <td>133</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>22</td>
            <td>155</td>
        </tr>
    </table>    
    <br />
    <br />
    <br />
    <br />
    
    <h1>两行两列合并成一个单元格</h1>
    <table width="400px" border="1" cellspacing="0">
        <tr>
            <td>5</td>
            <td>5</td>
            <td>5</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">1</td>
            <!--<td>2</td>-->
            <td>3</td>
        </tr>
        <tr>
            <!--<td colspan="2">4</td>-->
            <!--<td>5</td>-->
            <td>6</td>
        </tr>
        
    </table>
    </body>
</html>

 

posted @ 2018-08-08 15:35  gzu_zb  阅读(293)  评论(0编辑  收藏  举报