HEML表格总结

璀云霄

已于 2024-01-23 17:41:30 修改

阅读量73

点赞数

分类专栏：前端文章标签： html 前端

于 2023-03-27 15:02:44 首次发布

本文链接：https://blog.csdn.net/CloudyZfly/article/details/129794084

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

table标签的属性：

属性名	作用
width=n或m%	用于指定表格的宽度，单位是像素(px)，m%相当于表格所在的容器的百分比，值为整数
height=n或 m%	用于指定表格的高度，单位是像素(px)，m%相当于表格所在的容器的百分比，值为整数
border=n	用于定义表格的边框，值的类型是正整数，值越大边框越粗，当n=0时没有边框
align	用于定义表格的水平对齐方式(left center right)
valign	用于定义表格的垂直对齐方式(top middle buttom)
cellpadding	用于定义单元格的内边距，即单元格的内容与单元格边框之间的距离，默认为2px，值为整数
cellspecing	用于定义单元格的外边距，即单元格与单元格之间的距离，默认为2px，值为整数
bgcolor="颜色名称"	用于定义背景颜色
background="图片路径"	用于定义背景图像（建议使用相对路径）

PS：当背景颜色与图像同时使用时，背景图像会覆盖背景颜色

表格的tr和td标签也可以设置宽和高以及背景颜色

table标签的子标签：

属性名	作用
tr	用于定义表格的一行（即表格的行数）
td	用于定义一个单元格
th	用于定义一个单元格，它的特点是内容加粗且居中显示
colspan	用于定义跨列操作，也就是合并多个列，值为整数
rowspan	用于定义跨行操作，也就是合并多个行，值为整数
caption	用于定义表格的标题
thead	用于定义表头部分(只起标识作用，可以不加)
tbody	用于定义表体部分(只起标识作用，可以不加)
tfoot	用于定义表尾部分(只起标识作用，可以不加)

PS:若想保留一个空白的单元格，则可以在td标签内加入 

即 <td> </td>

快速建立一个n行m列的表格框架的方式：

table > tr * n > td * m（此处以生成一个2行2列的表格为例）

<body>
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

代码展示（含表格与表单）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册界面</title>
</head>

<body>
    <form>
        <table width="400" border="1" bgcolor="antiquewhite">
            <tr>
                <td colspan="2" align="middle"><strong>用户注册</strong></td>
            </tr>
            <tr bgcolor="white">
                <td align="right"><strong>用户名</strong></td>
                <td>
                    <input type="text" name="Username" placeholder="请输入用户名" size="15" maxlength="20">
                </td>
            </tr>
            <tr bgcolor="white">
                <td align="right"><strong>密码</strong></td>
                <td>
                    <input type="password" name="UserPass" placeholder="请输入密码" size="15" maxlength="20">
                </td>
            </tr>
            <tr bgcolor="white">
                <td align="right"><strong>性别</strong></td>
                <td>
                    <input type="radio" name="sex" value="男" checked>男
                    <input type="radio" name="sex" value="女">女
                </td>
            </tr>
            <tr bgcolor="white">
                <td align="right"><strong>爱好</strong></td>
                <td>
                    <input type="checkbox" name="like" value="写作">写作
                    <input type="checkbox" name="like" value="听音乐">听音乐
                    <input type="checkbox" name="like" value="体育">体育
                </td>
            </tr>
            <tr bgcolor="white">
                <td align="right"><strong>省份</strong></td>
                <td>
                    <select name="province">
                        <option value="陕西">陕西省</option>
                        <option value="山西">山西省</option>
                    </select>
                </td>
            </tr>
            <tr bgcolor="white">
                <td align="right"><strong>自我介绍</strong></td>
                <td>
                    <textarea name="intro" rows="10" cols="45">这家伙什么也没留下</textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="middle">
                    <input type="submit" name="send" value="提交">
                    <input type="reset" name="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
</body>

</html>