重走前端入门路（一）——HTML（2）

最新推荐文章于 2024-11-13 14:32:15 发布

码农界的夏侯惇

最新推荐文章于 2024-11-13 14:32:15 发布

阅读量256

点赞数

分类专栏：框架 css 科技 web前端程序员 vue HTML JavaScript 资讯编程文章标签：程序员编程 web前端资讯科技

本文链接：https://blog.csdn.net/kuangshenfengqi/article/details/94209436

版权

本文介绍了HTML中的表格使用，包括如何定义表格、单元格、边框和对齐方式，以及表格的合并技巧。此外，还讲解了HTML表单的基础知识，如何创建表单区域、各种表单控件以及表单的对齐方式。最后提到了表单在用户注册等场景的应用，并推荐了一个前端学习交流群。

摘要由CSDN通过智能技术生成

HTML表格

<table><!-- 表示一个表格 -->

<tr> <!-- 表示一行 -->
    <th>序号</th> <!-- 表示第一行有三个格子，并且th一般是首行 -->
    <th>产品名称</th>
    <th>产品价格</th>
</tr>

<tr> <!-- 表示一行 -->
    <td>01</td> <!-- 表示第二行有三个格子 -->
    <td>苹果</td>
    <td>¥5.00</td>
</tr>
</table>

可以在

用来显示边框

一般是依靠字体自己撑开边框的，如果想要自定义宽和高，可以：

th默认居中对齐，加粗
td默认左对齐，不加粗

如果想要td/th 水平方向居中，可以
如果想要th/td 垂直方向靠上，可以
如果想要一行的五个格子合并：，并删除其他四个td
如果想要合并一列的五个格子：，并删除其他四个tr里面的td
table常用标签
table标签：声明一个表格
tr标签：定义表格中的一行
td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
table常用属性
border 定义表格的边框
cellpadding 定义单元格内内容与边框的距离
cellspacing 定义单元格与单元格之间的距离
align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
colspan 设置单元格水平合并
rowspan 设置单元格垂直合并
用表格实现部分简历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格合并</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>表格合并</h2>
<!-- table>(tr>td*5)*6 -->
<table border="1" width="600" height="300" align="center">
    <tr>
        <td colspan="5">基本情况</td>
    </tr>
    <tr>
        <td width="15%">姓名</td>
        <td width="25%"></td>
        <td width="15%">性别</td>
        <td width="25%"></td>
        <td rowspan="5" width="20%"><img src="../images/huge.jpg" alt="照片"></td>
    </tr>
    <tr>
        <td>民族</td>
        <td></td>
        <td>出生日期</td>
        <td></td>
    </tr>
    <tr>
        <td>政治面貌</td>
        <td></td>
        <td>健康情况</td>
        <td></td>
    </tr>
    <tr>
        <td>籍贯</td>
        <td></td>
        <td>学历</td>
        <td></td>
    </tr>
    <tr>
        <td>电子邮箱</td>
        <td></td>
        <td>联系电话</td>
        <td></td>
    </tr>
</table>

</body>
</html>

表格合并实现简单个人简历