html表格制作实战

最新推荐文章于 2024-02-16 23:45:17 发布

Octoberfly

最新推荐文章于 2024-02-16 23:45:17 发布

阅读量727

点赞数

文章标签： html5 html 前端

本文链接：https://blog.csdn.net/weixin_43725034/article/details/119390843

版权

在学习完一些HTML知识后，制作了两个HTML表格，并解释制作过程。

第一个是使用html制作简历

这个属于比较基础的html表格，唯一可能有点难度的就是跨行合并，跨列合并。

首先要先知道表格的基本知识。

表格标签：table-tr-td

<table>...</table> 用于定义一个表格开始和结束

<th>...</th> 定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标签，<th>标签必须放在<tr>标签内

<tr>...</tr> 定义一行标签，一组行标签内可以建立多组由<td>或<th>标签所定义的单元格

<td>...</td> 定义单元格标签，一组<td>标签将将建立一个单元格，<td>标签必须放在<tr>标签内c

具体格式是:(两行两列)
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</teble>

table:
border属性：设置边框线的宽度（默认值是0）
cellspacing属性：设置单元格和单元格之间的间隙(默认是1)
bgcolor属性：设置整个表格的背景颜色
width属性：设置整个表格的宽度
height属性：设置整个表格的高度
cellpadding属性：设置表格内容和边框之间的距离
align属性：left/right/center; 设置整个表格在网页中的对齐方式方式
tr:
bgcolor属性：设置一行的背景颜色
height属性：设置整个一行的高度
align属性：center,设置一行中所有的单元格内容居中

colspan属性：列的合并
rowspan属性：行的合并

简历代码如下：

<!--
 * @Description: 个人简历
 * @Author: rendc
 * @Date: 2021-08-03 16:03:38
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-04 19:06:39
-->
<!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>
  <div>
    <table border="1" cellspacing="0" cellpadding="2" align="center">
      <tr align="center">
        <th colspan="7" align="center">个人简历</th>
        <!-- <th>第二列</th>
        <th>第三列</th>
        <th>第四列</th>
        <th>第五列</th>
        <th>第六列</th>
        <th>第七列</th> -->
      </tr>
      <tr align="center">
        <td style="width: 70px;">姓名</td>
        <td style="width: 70px;"></td>
        <td>性别</td>
        <td></td>
        <td>出生年月</td>
        <td style="width: 70px;"></td>
        <td style="width: 70px;" rowspan="3">照片</td>
      </tr>
      <tr align="center">
        <td>籍贯</td>
        <td></td>
        <td>民族</td>
        <td></td>
        <td>身高</td>
        <td></td>
        <!-- <td>2行7列</td> -->
      </tr>
      <tr align="center">
        <td>政治面貌</td>
        <td></td>
        <td>学历</td>
        <td></td>
        <td>职业资格</td>
        <td></td>
        <!-- <td>3行7列</td> -->
      </tr>
      <tr align="center">
        <td rowspan="2">家庭地址</td>
        <td colspan="2" rowspan="2"></td>
        <!-- <td>4行3列</td> -->
        <td colspan="2">联系电话</td>
        <!-- <td>4行5列</td> -->
        <td colspan="2"></td>
        <!-- <td>4行7列</td> -->
      </tr>
      <tr align="center">
        <!-- <td>5行1列</td> -->
        <!-- <td>5行2列</td> -->
        <!-- <td>5行3列</td> -->
        <td colspan="2">e-mail</td>
        <!-- <td>5行5列</td> -->
        <td colspan="2"></td>
        <!-- <td>5行7列</td> -->
      </tr>
      <tr align="center">
        <td rowspan="3">社会关系</td>
        <td>关系</td>
        <td style="width: 70px;">姓名</td>
        <td>政治面貌</td>
        <td colspan="3">工作单位</td>
        <!-- <td>6行6列</td> -->
        <!-- <td>6行7列</td> -->
      </tr>
      <tr align="center">
        <!-- <td>7行1列</td> -->
        <td>&nbsp;</td>
        <td></td>
        <td></td>
        <td colspan="3"></td>
        <!-- <td>7行6列</td> -->
        <!-- <td>7行7列</td> -->
      </tr>
      <tr align="center">
        <!-- <td>8行1列</td> -->
        <td>&nbsp;</td>
        <td></td>
        <td></td>
        <td colspan="3"></td>
        <!-- <td>8行6列</td> -->
        <!-- <td>8行7列</td> -->
      </tr>
      <tr align="center">
        <td rowspan="3" style="height: 120px;">教育背景</td>
        <td colspan="6" rowspan="3">&nbsp;</td>
        <!-- <td>9行3列</td> -->
        <!-- <td>9行4列</td> -->
        <!-- <td>9行5列</td> -->
        <!-- <td>9行6列</td> -->
        <!-- <td>9行7列</td> -->
      </tr>
      <tr align="center">
        <!-- <td>10行1列</td> -->
        <!-- <td>10行2列</td> -->
        <!-- <td>10行3列</td>
        <td>10行4列</td>
        <td>10行5列</td>
        <td>10行6列</td>
        <td>10行7列</td> -->
      </tr>
      <tr align="center">
        <!-- <td>11行1列</td> -->
        <!-- <td>11行2列</td>
        <td>11行3列</td>
        <td>11行4列</td>
        <td>11行5列</td>
        <td>11行6列</td>
        <td>11行7列</td> -->
      </tr>
      <tr align="center">
        <td style="height:100px">任职情况</td>
        <td colspan="6"></td>
        <!-- <td>12行3列</td>
        <td>12行4列</td>
        <td>12行5列</td>
        <td>12行6列</td>
        <td>12行7列</td> -->
      </tr>
      <tr align="center">
        <td style="height:100px">获奖情况</td>
        <td colspan="6"></td>
        <!-- <td>13行3列</td>
        <td>13行4列</td>
        <td>13行5列</td>
        <td>13行6列</td>
        <td>13行7列</td> -->
      </tr>
      <tr align="center">
        <td>特长爱好</td>
        <td colspan="6"></td>
        <!-- <td>14行3列</td>
        <td>14行4列</td>
        <td>14行5列</td>
        <td>14行6列</td>
        <td>14行7列</td> -->
      </tr>
      <tr align="center">
        <td style="height:100px">个人自述</td>
        <td colspan="6"></td>
        <!-- <td>15行3列</td>
        <td>15行4列</td>
        <td>15行5列</td>
        <td>15行6列</td>
        <td>15行7列</td> -->
      </tr>
    </table>
  </div>
</body>

</html>

首先要看清楚要求，然后根据表格计算需要多少行和列。根据简历大概15列7行。因为需要输入太多行，可以采用tr>td*需要的列数，然后就会跳出来，十分节省时间，不用一行行输入。为了方便理解，可以采用注释，按ctrl和?则会跳出来。最重要的就是会判断colspan属性：列的合并
rowspan属性：行的合并，然后就可以做出这份简历。

第二个是使用html制作课程表。

<!--
 * @Author: your name
 * @Date: 2021-08-03 19:59:29
 * @LastEditTime: 2021-08-04 11:17:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \day01\Day02\课程表.html
-->
<!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>Document</title>
</head>
<body>
    <table align="center" border="2" cellspacing = "0" cellpadding="50">
       
        <tr >
            <th  ></th>
            <th colspan="2" align="center">周一</th>
            <!-- <th></th> -->
            <th colspan="2" align="center">周二</th>
            <!-- <th></th> -->
            <th colspan="2" align="center">周三</th>
            <!-- <th></th> -->
            <th colspan="2" align="center">周四</th>
            <!-- <th></th> -->
            <th colspan="2" align="center"> 周五</th>
            <!-- <th></th> -->
        </tr>
        <tr>
            <td align="center">1<br>8:30</td>
            <td colspan="2" rowspan="2" bgcolor="#f05362">大学英语（IV)<br>@10203</td>
            <!-- <td></td> -->
            <td colspan="2" rowspan="2"></td>
            <!-- <td></td> -->
            <td colspan="2" rowspan="2" bgcolor="#45a9e6">大学体育（IV)</td>
            <!-- <td></td> -->
            <td colspan="2" rowspan="2" ></td>
            <!-- <td></td> -->
            <td colspan="2" rowspan="2" ></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td align="center">2<br>9:30</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td align="center">3<br>10:30</td>
            <td rowspan="2" colspan="2"></td>
            <!-- <td></td> -->
            <td colspan="2" rowspan="2" bgcolor="#fed163">信号与系统@11302</td>
            <!-- <td></td>  -->
            <td colspan="2" rowspan="2" bgcolor="#51dc9b" >形势与政策（IV)@15208</td>
            <!-- <td></td> -->
            <td colspan="2" rowspan="2"></td>
            <!-- <td></td> -->
            <td colspan="2" rowspan="2" bgcolor="#6ed4e8"  >数据结构与算法分析</td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td align="center">4<br>11:30</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td align="center">5<br>12:30</td>
            <td colspan="2" rowspan="2"></td>
            <!-- <td></td> -->
            <td colspan="2" rowspan="2" bgcolor="#51dc9b">模拟电子技术基础@16204</td>
            <!-- <td></td> -->
            <td colspan="2" rowspan="2"></td>
            <!-- <td></td> -->
            <td colspan="2" rowspan="2" bgcolor="#3c52b5">电装实习@11301</td>
            <!-- <td></td> -->
            <td rowspan="2" colspan="2"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td align="center">6<br>14:30</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td align="center">7<br>15:30</td>
            <td colspan="2" rowspan="2" bgcolor="#f1d347">毛概@14208</td>
            <!-- <td></td> -->
            <td rowspan="2" colspan="2"></td>
            <!-- <td></td> -->
            <td colspan="2" rowspan="2" bgcolor="#48dcc3">电路信号与系统实验</td>
            <!-- <td></td> -->
            <td colspan="2" rowspan="2"></td>
            <!-- <td></td> -->
            <td colspan="2" rowspan="2"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td align="center">8<br>16:30</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td align="center">9<br>17:30</td>
            <td colspan="2" rowspan="2"></td>
            <!-- <td></td> -->
            <td colspan="2" rowspan="2"></td>
            <!-- <td ></td> -->
            <td colspan="2" rowspan="2"></td>
            <!-- <td></td> -->
            <td ></td>
            <!-- <td></td> -->
            <td  colspan="2" rowspan="2" bgcolor="#643ab8">信号与系统</td>
            <!-- <td></td> -->
            
        </tr>
        <tr>
            <td align="center">10<br>18:30</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td colspan="2" rowspan="2" bgcolor="#f2dc48">大学体育</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td align="center">11<br>19:30</td>
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td colspan="2" ></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td align="center">12<br>20:30</td>
            <td colspan="2"  bgcolor="#75c0cd">选修</td>
            <!-- <td></td> -->
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>




    </table>
</body>
</html>

这个课程表制作就是要区分清楚表格的位置，其怎么合并，这个判断是十分重要的。

Octoberfly

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
html表格制作实战

在学习完一些HTML知识后，制作了两个HTML表格，并解释制作过程。第一个是使用html制作简历这个属于比较基础的html表格，唯一可能有点难度的就是跨行合并，跨列合并。首先要先知道表格的基本知识。表格标签：table-tr-td<table>...</table> 用于定义一个表格开始和结束<th>...</th> 定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标签，<th>标签必须放在<...
复制链接

扫一扫