html用table标签制作表格-蒲公英云

html用table标签制作表格

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JveHpoYW5n_size_16_color_FFFFFF_t_70

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        table {
            border-collapse: collapse;/*表格样式。如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性*/
        }
        td,th{
            width: 100px;
            height: 40px;
            border: 1px solid ;
            font-size: 12px;
            text-align: center;
        }
        tr:nth-of-type(odd){
            background-color: lawngreen;/*每隔一行设置行颜色*/
        }
    </style>
</head>
<body>
<table>
<tbody>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
        <th>爱好</th>
    </tr>
    <tr>
        <td>AA</td>
        <td>BB</td>
        <td>CC</td>
        <td>DD</td>
    </tr>
    <tr>
        <td colspan="2">EE</td> <!--横向合并2个单元格-->
        <td>GG</td>
        <td rowspan="2">HH</td> <!--纵向合并单元格-->
    </tr>
    <tr>
        <td>II</td>
        <td >JJ</td>
        <td>KK</td>
    </tr>
    <tr>
        <td>AA</td>
        <td>BB</td>
        <td>CC</td>
        <td>DD</td>
    </tr>
    <tr>
        <td>AA</td>
        <td>BB</td>
        <td>CC</td>
        <td>DD</td>
    </tr>
</tbody>
</table>
</body>
</html>