HTML表格的制作

最新推荐文章于 2024-10-27 15:48:27 发布

EddySD

最新推荐文章于 2024-10-27 15:48:27 发布

阅读量137

点赞数 2

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/EddySD/article/details/140531503

版权

tr 一行

td 一列

border 边框

cellspacing 单元格与单元格之间的距离

cellpadding 单元格与文字之间的距离

width 宽

height 高

bordercolor 边框颜色

backgroundcolor 背景颜色

align 居中{直接给表格使用，表格居中。给tr或者td使用，tr或td的内容居中}

例子1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellspacing="0" width="500" height="500" cellpadding="10" bordercolor="red" bgcolor="pink" align="center">
        <tr align="left">
            <td>11111</td>
            <td>11111</td>
            <td>11111</td>
        </tr>
        <tr align="center">
            <td>11111</td>
            <td>11111</td>
            <td>11111</td>
        </tr >
        <tr align="right"> 
            <td>11111</td>
            <td>11111</td>
            <td>11111</td>
        </tr>
    </table>
</body>
</html>

运行结果

表格的合并

colspan 水平合并，保留左边，删除右边

rowspan 垂直合并，保留上边，删除下边

caption 表头

例子2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>合并单元格6和7 colspan</p>
    <p>合并单元格15和20 rowspan</p>

    <caption>课程表</caption>
    <table border="1" cellspacing="0" height="500" width="500" align="center">
        <tr>
            <th>单元格1</th>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <th colspan="2">单元格6 7</th>
            
            <td>单元格8</td>
            <td>单元格9</td>
            <td>单元格10</td>
        </tr>
        <tr>
            <th colspan="2" rowspan="2">单元格11</th>
           
            <td>单元格13</td>
            <td>单元格14</td>
            <td rowspan="2">单元格15 20</td>
        </tr>
        <tr>
           
           
            <td>单元格18</td>
            <td>单元格19</td>
            
        </tr>
        <tr>
            
            <td>单元格21</td>
            <td>单元格22</td>
            <td>单元格23</td>
            <td>单元格24</td>
            <td>单元格25</td>
        </tr>
    </table>
</body>
</html>

运行结果

小练习：做一个课程表

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <caption>课程表</caption>
    <table border="1" cellspacing="0" width="500" height="500" align="center" bordercolor="green"> 
        <tr align="center">
            <td colspan=2></td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
        </tr>
        <tr align="center">
            <td rowspan="2">上午</td>
            <td>1</td>
            <td>数学</td>
            <td>语文</td>
            <td>英语</td>
            <td>化学</td>
            <td>美术</td>
        </tr>
        <tr align="center">
            <td>2</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
        </tr>
        <tr align="center">
            <td rowspan="2">下午</td>
            <td>3</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
        </tr>
        <tr align="center">
            <td>4</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
        </tr>
        
    </table>
    
</body>
</html>

运行结果