HTML 表格

最新推荐文章于 2024-07-12 00:07:26 发布

Eric.6

最新推荐文章于 2024-07-12 00:07:26 发布

阅读量70

点赞数

文章标签：数学建模

本文链接：https://blog.csdn.net/m0_73403871/article/details/131291815

版权

1、基本结构

1、一个完整的表格由：表格标题、表格头部、表格主体、表格脚注、四部分组成

2、表格涉及到的标签：

table：表格
caption：表格标题
thead：表格头部
tbody：表格主体
tfoot：表格角注
tr：每一行
th、td：每一个单元格（备注：表格头部中用th，表格主体、表格角注中用td）

3、具体编码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table id="学生信息" border="1">
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>名族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉族</td>
                <td>团员</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>20</td>
                <td>满族</td>
                <td>群众</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>19</td>
                <td>回族</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>女</td>
                <td>21</td>
                <td>壮族</td>
                <td>团员</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计：4人</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

2、常用属性

标签名	标签语义	常用属性	单/双标签
table	表格	width：设置表格宽度 height：设置表格高度 border：设置表格边框宽度 cellspacing：设置单元格之间的间距	双
thead	表格头部	height：设置表格高度 align：设置单元格水平对齐方式，可选值如下： 1、 left 左对齐 right 右对齐 center：居中 valign：设置垂直对齐方式，可选值如下：1、top 顶部对齐 bottom 底部对齐 middle 居中对齐	双
tbody	表格主体	通用属性与thead相同	双
tfoot	表格脚注	通用属性与thead相同	双
tr	行	通用属性与thead相同	双
td	普通单元格	width：设置单元格的宽度，同列所有单元格全都会受影响 height：设置单元格的高度，同行所有单元格全都受影响 align：设置单元格水平对齐方式 valign：设置单元格垂直对齐方式 rowspan：指定要跨的行数 colspan：指定要跨的列数	双
th	表头单元格	常用属性与td相同	双

注意点：

<table>元素的border属性可以控制表格边框，但border值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度，这个问题如何解决？--后期靠css控制。
给某个th或td设置了宽度之后，他们所在的那一列的宽度就确定了。

3、跨行跨列

rowspan：指定要跨的行数
colspan：指定要跨的列数

课程表效果：

编写思路：

Eric.6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 表格

align：设置单元格水平对齐方式，可选值如下： 1、 left 左对齐 right 右对齐 center：居中。valign：设置垂直对齐方式，可选值如下：1、top 顶部对齐 bottom 底部对齐 middle 居中对齐。1、一个完整的表格由：表格标题、表格头部、表格主体、表格脚注、四部分组成。width：设置单元格的宽度，同列所有单元格全都会受影响。height：设置单元格的高度，同行所有单元格全都受影响。valign：设置单元格垂直对齐方式。align：设置单元格水平对齐方式。
复制链接

扫一扫