前端基础笔记-HTML-表格

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

今天也很想吃泡椒牛蛙

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

阅读量256

点赞数

分类专栏：前端基础笔记--html&&css 文章标签： html 列表

本文链接：https://blog.csdn.net/mkx2723/article/details/107410395

版权

表格标签

基本操作

表格标签<table></table>

属性名	含义	常用值
border	边框	像素
width	宽	像素
height	高	像素
align	表格整体的对齐方式	left、right、center
cellspacing	单元格的边框之间的间距	像素，一般设置为0比较好看
cellpadding	单元格内容与单元格边框的距离	像素

表格标题标签<caption></caption>
内容默认居中，并且显示在表格的正上方

行标签<tr></tr>

单元格标签<td></td>

表头标签<th></th>
特殊的单元格标签，其中文字加粗居中

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1" align="center" width="500" height="300" cellspacing="0" cellpadding="10">
        <caption>
            个人信息表
        </caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>01</td>
            <td>小红</td>
            <td>12</td>
        </tr>
        <tr>
            <td>02</td>
            <td>小红</td>
            <td>12</td>
        </tr>
        <tr>
            <td>03</td>
            <td>小兰</td>
            <td>11</td>
        </tr>
        <tr>
            <td>04</td>
            <td>小明</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

合并单元格

跨行合并rowspan
跨列合并colspan
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1" align="center" width="500" height="300" cellspacing="0" cellpadding="10">
        <caption>
            个人信息表
        </caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>

最低0.47元/天解锁文章

今天也很想吃泡椒牛蛙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础笔记-HTML-表格

表格表格基本操作合并单元格一级目录一级目录表格基本操作表格标签<table></table>属性名含义常用值border边框像素width宽像素height高像素align表格整体的对齐方式left、right、centercellspacing单元格的边框之间的间距像素，一般设置为0比较好看cellpadding单元格内容与单元格边框的距离像素表格标题标签<caption><
复制链接

扫一扫