HTML常用标签之表格

最新推荐文章于 2024-03-19 00:47:22 发布

sky1058164894

最新推荐文章于 2024-03-19 00:47:22 发布

阅读量120

点赞数

本文链接：https://blog.csdn.net/sky1058164894/article/details/80489742

版权

1.表格的作用

表格通常来组织结构化的信息,把数据储存在单元格里

2.如何构建一个表格?

<table> ---------------------------------------表格

<tr> ---------------------------------------行

<th>内容</th> --------------------单元格 (加粗)

<td>内容</td> --------------------单元格

</tr>

</table>

横行竖列

3.表格的属性

属性名称属性值说明

width 数值设置表格宽度

height 数值设置表格高度

bgcolor 英文颜色设置表格背景颜色

rgb ('255,255,255')

十六位进制数

background 图像地址设置表格背景图像 (与bgcolor同时用,background的优先级较高)

border 数值设置边框宽度

bordercolor 英文颜色设置边框颜色

rgb ('255,255,255')

十六位进制数

cellpadding 数值设置内边距 (单元格边框与内容之间的距离)

cellspacing 数值设置外边距 (单元格之间的距离)

align 对齐方式 (left|center|right) 设置对齐方式

4.行属性

属性名称属性值说明

align 对齐方式 (left|center|right) 设置对齐方式

bgcolor 英文颜色设置表格背景颜色

rgb ('255,255,255')

十六位进制数

valign (top|middle|bottom) 设置垂直对齐方式

5.单元格属性

属性名称属性值说明

align 对齐方式 (left|center|right) 设置对齐方式

bgcolor 英文颜色设置表格背景颜色

rgb ('255,255,255')

十六位进制数

valign (top|middle|bottom) 设置垂直对齐方式

rowspan 数值设置行合并

colspan 数值设置列合并

6.练习

1.练习一

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>表格</title>
    </head>
    <body>
        <table border="1" width="500" height="200" cellspacing="0" cellpadding="0" bordercolor="red" bgcolor="pink" align="center" background="../images/1.jpg">
            <tr align="left" bgcolor="pink" valign="top"><!-- valign (top|middle|bottom) -->
            <!-- 在单个行内设置背景颜色时可以覆盖掉table里面设置的背景图片 -->
                <td>第一个单元格</td>
                <td>第二个单元格</td>
                <td>第三个单元格</td>
            </tr>
            <tr>
                <td>第一个单元格</td>
                <td>第二个单元格</td>
                <td>第三个单元格</td>
            </tr>
        </table>

    </body>
</html>

效果如下

2.练习二

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">

        </style>
    </head>
    <body>
    <table border="2" width="700" height="500" cellspacing="0" cellpading="5" align="center" bordercolor="black">
        <tr>
            <th colspan="8">项目增补单</th>
            <td>备注</td>
        </tr>
        <tr align="center">
            <td>序号</td>
            <td>维修项目及更换配件</td>
            <td>单价</td>
            <td>数量</td>
            <td>小计</td>
            <td>工时费</td>
            <td>合计</td>
            <td>故障原因</td>
        </tr>
        <tr align="center">
            <td>1</td>
            <td></td>
            <td></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>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td></td>
            <td></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>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td>5</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td>6</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td rowspan="4">7</td>
            <td></td>
            <td rowspan="4" colspan="2"></td>
            <td rowspan="4"></td>
            <td rowspan="4"></td>
            <td rowspan="4"></td>
            <td rowspan="4"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <td>备件费用小计:</td>
            <td>工时费用小计:</td>
            <td colspan="6">合计:</td>
           
        </tr>
        <tr align="center">
            <td>班组长:</td>
            <td>技术部:</td>
            <td>服务顾问:</td>
            <td colspan="5">客户确认:</td>
        </tr>
    </table>
    </body>
</html>

效果如下