html---7.表格的应用

于 2021-06-05 17:28:13 发布
阅读量144 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML基础知识 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SLSLSLSLSLSLS/article/details/117601029
本文详细介绍了HTML中表格的创建与样式设置，包括基本构成、标题、表头、基本属性（宽度、高度、对齐方式）、边框、背景、行属性以及单元格属性的调整。此外，还涉及到了表格的结构，如表头、表主体和表尾的标记，以及表格的嵌套使用。通过这些内容，读者可以掌握如何创建和美化HTML表格。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

7.1表格的创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
7.1.1表格的基本构成<br>
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

7.1.2表格的标题---caption<br>
<table>
    <caption>添加表格的实例</caption>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
    </tr>
</table>

7.1.3表格的表头---th<br>
<table>
    <caption>表格</caption>
    <tr>
        <th>0.1</th>
        <th>0.2</th>
    </tr>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
    </tr>
</table>
</body>
</html>

7.2设置表格的基本属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
7.2.1表格的宽度---width<br>
<table width="400">
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>物理</th>
    </tr>

    <tr>
        <td>李梅</td>
        <td>98</td>
        <td>98</td>
        <td>98</td>
        <td>98</td>
    </tr>

    <tr>
        <td>张三</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
    </tr>

    <tr>
        <td>李四</td>
        <td>58</td>
        <td>58</td>
        <td>58</td>
        <td>58</td>
    </tr>
</table>

7.2.2表格的高度---height
<table width="400" height="400">
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>物理</th>
    </tr>

    <tr>
        <td>李梅</td>
        <td>98</td>
        <td>98</td>
        <td>98</td>
        <td>98</td>
    </tr>

    <tr>
        <td>张三</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
    </tr>

    <tr>
        <td>李四</td>
        <td>58</td>
        <td>58</td>
        <td>58</td>
        <td>58</td>
    </tr>
</table>

7.2.3表格的对齐方式---align<br>
<table width="400" height="400" align="center">
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>物理</th>
    </tr>

    <tr>
        <td>李梅</td>
        <td>98</td>
        <td>98</td>
        <td>98</td>
        <td>98</td>
    </tr>

    <tr>
        <td>张三</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
    </tr>

    <tr>
        <td>李四</td>
        <td>58</td>
        <td>58</td>
        <td>58</td>
        <td>58</td>
    </tr>
</table>

</body>
</html>

7.3设置表格的边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
7.3.1表格边框的宽度---border
7.3.2表格边框的颜色---bordercolor
7.3.3表格内框的宽度---cellpacing
7.3.4表格内文字与边框的间距---celloadding
<table width="400" height="400" align="center" border="1" bordercolor= "red" bgcolor="aqua" cellspacing="3" cellpadding="10">
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>物理</th>
    </tr>

    <tr>
        <td>李梅</td>
        <td>98</td>
        <td>98</td>
        <td>98</td>
        <td>98</td>
    </tr>

    <tr>
        <td>张三</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
    </tr>

    <tr>
        <td>李四</td>
        <td>58</td>
        <td>58</td>
        <td>58</td>
        <td>58</td>
    </tr>
</table>
</body>
</html>

7.4设置表格的背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
7.4.1表格的背景颜色---bgcolor
7.4.2表格的背景图像---background

<table width="400" height="400" bgcolor="aqua" align="center" border="1" cellspacing="3" background="123.jfif">
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>物理</th>
    </tr>

    <tr>
        <td>李梅</td>
        <td>98</td>
        <td>98</td>
        <td>98</td>
        <td>98</td>
    </tr>

    <tr>
        <td>张三</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
    </tr>

    <tr>
        <td>李四</td>
        <td>58</td>
        <td>58</td>
        <td>58</td>
        <td>58</td>
    </tr>
</table>
</body>
</html>

7.5设置表格的行属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
7.5.1高度的控制---height
7.5.2行的边框的颜色---bordercolor
7.5.3行的背景颜色---bgcolor
7.5.4行文字的水平对齐方式---align
7.5.5行文字的垂直对齐方式---valign:top,middle,bottom
7.5.6表格标题的垂直对齐方式---align:top,bottom
<table width="400" height="400" align="center" border="1" bordercolor = "red">
    <caption>成绩表</caption>
    <tr height="100">
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>物理</th>
    </tr>

    <tr bordercolor="blue">
        <td>李梅</td>
        <td>98</td>
        <td>98</td>
        <td>98</td>
        <td>98</td>
    </tr>

    <tr bgcolor="aqua" valign="top">
        <td>张三</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
    </tr>

    <tr>
        <td align="center">李四</td>
        <td>58</td>
        <td>58</td>
        <td>58</td>
        <td>58</td>
    </tr>
</table>
</body>
</html>

7.6调整单元格属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
7.6.1单元格大小,width,height
7.6.2单元格水平跨度---colspan
7.6.3单元格垂直跨度---rowspan
7.6.4单元格对齐方式---align,valign
7.6.5单元格的背景色---bgclor
7.6.6单元格的边框颜色---bordercolor
7.6.7单元格的亮边框---bordercolorlight:向光的部分
7.6.8单元格的暗边框---bordercolordark
7.6.9单元格的背景图像---background

<table width="400" height="400" align="center" border="1" >
    <tr>
        <th align="left">姓名</th>
        <th valign="top">语文</th>
        <th bgcolor="aqua">数学</th>
        <th bordercolor="blue">英语</th>
        <th bordercolorlight="red">物理</th>
    </tr>

    <tr>
        <td colspan="2">李梅 98</td>
        <td>98</td>
        <td background="123.jfif">98</td>
        <td bordercolorlight="red">98</td>

    </tr>

    <tr>
        <td rowspan="2">张三<br>李四</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
    </tr>

    <tr>

        <td>58</td>
        <td>58</td>
        <td>58</td>
        <td>58</td>
    </tr>
</table>
</body>
</html>

7.7表的结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
7.7.1表格的表头标记---thead<br>
7.7.2表格的表主体标记---tbody<br>
7.7.3表格的表尾标记---tfoot<br>
<table width="400" height="400" align="center">
    <thead border="3" bgcolor="blue" valign="middle">
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>物理</th>
    </tr>

    <tr>
        <td>李梅</td>
        <td>98</td>
        <td>98</td>
        <td>98</td>
        <td>98</td>
    </tr>
    </thead>

    <tbody bgcolor="red" align="left" valign="bottom">
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
        <td>18</td>
    </tr>

    <tr>
        <td>李四</td>
        <td>58</td>
        <td>58</td>
        <td>58</td>
        <td>58</td>
    </tr>
    </tbody>

    <tfoot  >
    <tr>
        <td colspan="5">
        创建时间: 2021-6-5
        </td>
    </tr>
    </tfoot>
</table>

</body>
</html>

7.8表格的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>表格的嵌套</caption>
    <tr>
        <td>表头1</td>
        <td>表头2</td>
    </tr>
    <tr>
        <td>
    <table>
        <tr>
            <td>语文</td>
        </tr>
        <tr>
            <td>数学</td>
        </tr>
        <tr>
            <td>英语</td>
        </tr>
    </table>
        </td>
        <td>
    <table>
        <tr>
            <td>99</td>
        </tr>
        <tr>
            <td>96</td>
        </tr>
        <tr>
            <td>100</td>
        </tr>
    </table>
        </td>
    </tr>
</table>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值