HTML 表格基础篇

最新推荐文章于 2024-08-04 20:38:28 发布

wangfei933

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量109

点赞数 1

分类专栏： table标签文章标签： html

本文链接：https://blog.csdn.net/wangfei933/article/details/117469074

版权

table标签专栏收录该内容

1 篇文章 0 订阅

订阅专栏

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

这个例子演示如何在 HTML 文档中创建表格。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        table tr td {
            height: 28px;
            border: 1px solid #bebebc;
        }

        table {
            border: 1px solid #6e6e6d;
        }

    </style>
</head>
<body>
   <h2  align="center" >个人简历</h2>
    <table align="center" >
        <colgroup span="7" width="100px" ></colgroup>
        <tr align="center">
            <td>姓名</td>
            <td></td>
            <td>性别</td>
            <td></td>
            <td>出生年月</td>
            <td></td>
            <td  rowspan="4">照片</td>
        </tr>
        <tr align="center">
            <td>名族</td>
            <td></td>
            <td>政治面貌</td>
            <td></td>
            <td>身高</td>
            <td></td>
        </tr>
        <tr align="center">
            <td>学制</td>
            <td></td>
            <td>学历</td>
            <td></td>
            <td>户籍</td>
            <td></td>
        </tr>
        <tr align="center">
            <td>专业</td>
            <td></td>
            <td colspan="2">毕业学校</td>
            <td colspan="2"></td>
        </tr>

        <tr align="center" height="30px">
            <td colspan="7"><b>技能，特长或爱好</b></td>
        </tr>

        <tr>
            <td>外语等级</td>
            <td colspan="2"></td>
            <td>计算机</td>
            <td colspan="3"></td>
        </tr>

        <tr align="center">
            <td colspan="7">个人简历</td>
        </tr>
        <tr align="center">
            <td>时间</td>
            <td colspan="2">单位</td>
            <td colspan="4">简历</td>

        </tr>

        <tr align="center">
            <td></td>
            <td colspan="2"></td>
            <td colspan="4"></td>
        </tr>
        <tr align="center">
            <td></td>
            <td colspan="2"></td>
            <td colspan="4"></td>
        </tr>
        <tr align="center">
            <td></td>
            <td colspan="2"></td>
            <td colspan="4"></td>
        </tr>
        <tr align="center">
            <td colspan="7">联系方式</td>
        </tr>
        <tr align="center">
            <td>通讯地址</td>
            <td colspan="2"></td>
            <td>联系方式</td>
            <td colspan="3"></td>
        </tr>
        <tr align="center">
            <td >E-maill</td>
            <td colspan="2"> </td>
            <td>邮编</td>
            <td colspan="3"></td>
        </tr>
        <tr align="center">
            <td colspan="7">自我评价</td>
        </tr>
    </table>

</body>
</html>

运行效果：

建表

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <table>
        <!--表格标签-->
        <tr>
            <!--第一行-->
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!--第二行-->
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!--第三行-->
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!--第四行-->
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

此时你的表就建好的，但是你运行的时候还是什么都没有，是以为表格默认无边框，若想加上边框则在<table>标签里加上属性 border="1"

在上面的代码中的<table>改为：

<table border="1" >

显示

这时我们发现这边框线不是我们想要的，再加上cellspacing="0" 属性

<table border="1" cellspacing="0">

显示：

cellspacing属性里的0表示的是表格边框和行列边框的距离（表格里的内边距。），上面显示的是单实线边框。

在表里添加数据

现在表里面没有内容所以表很小当我们再边框里面加上数据 <td>这里是需要添加的数据</td>

这时我们发现边框很杂乱，是因为我们的边框大小没有固定，现在它的长度但是单元格里的数据撑大的

给表格设置宽度

方法1：.在标签里加width 属性<td width="？px" > 里面的？是你想要的长度，px是单位

方法二：上面那种方法一个一个添加很麻烦，我们还可以使用<colgroup ></colgroup>标签设置宽高，<colgroup span="6" width="80px"></colgroup> 属性span是几列的，width是宽度大小（6列的长度80px）

字体居中

方法一：在<tr>里添加属性align="center"

方法二：当表格里的内容全部居中，如果一个一个加很麻烦，我们可以在css中设置宽度

table tr {
text-align: center
}

合并单元格

在<td>属性里加colspan属性（行）

在<td>属性里加 rowspan属性（列）

例如<td colspan="7">111</td>

把属性加到我们的代码中

以上是就是表格的基本制作内容，还有需要补充的可以留言

wangfei933

关注

1
点赞
踩
0

收藏

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

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。...
复制链接

扫一扫

专栏目录