使⽤HTML写⼀个简历表格代码实现的效果如下：
代码如下：
1<!DOCTYPE html>
2<html>
3<head>
4 <title>填写个⼈简历</title>
5</head>
6<body>
7 <table border="1" align="center" width="1050" height="800" bordercolor="black">
8 <caption>
9 <h1>个⼈简历</h1>
10 </caption>
html表格元素
11 <tr>
12 <td align="center" width="150">姓名</td>
13 <td align="center" width="150"></td>
14 <td align="center" width="150">性别</td>
15 <td align="center" width="150"></td>
16 <td align="center" width="150">出⽣年⽉</td>
17 <td align="center" width="150"></td>
18 <td rowspan="3" align="center">照⽚</td>
19 </tr>
20 <tr>
21 <td align="center" width="150">省份证号码</td>
22 <td align="center" width="150"></td>
23 <td align="center" width="150">民族</td>
24 <td align="center" width="150"></td>
25 <td align="center" width="150">政治⾯貌</td>
25 <td align="center" width="150">政治⾯貌</td>
26 <td align="center" width="150"></td>
27 </tr>
28 <tr>
29 <td align="center" width="150">婚姻状况</td>
30 <td align="center" width="150"></td>
31 <td align="center" width="150">健康状况</td>
32 <td align="center" width="150"></td>
33 <td align="center" width="150">⾝⾼</td>
34 <td align="center" width="150"></td>
35 </tr>
36 <tr>
37 <td align="center" width="150">现户⼝所在地</td>
38 <td align="center" width="150"></td>
39 <td align="center" width="150">所学专业</td>
40 <td align="center" width="150"></td>
41 <td align="center" width="150">学历</td>
42 <td align="center" width="150" colspan="2"></td>
43 </tr>
44 <tr>
45 <td align="center" width="150">最后毕业学校</td>
46 <td align="center" width="150"></td>
47 <td align="center" width="150">毕业时间</td>
48 <td align="center" width="150"></td>
49 <td align="center" width="150">技术职称</td>
50 <td align="center" width="150" colspan="2"></td>
51 </tr>
52 <tr>
53 <td align="center" width="150">现⼯作单位</td>
54 <td align="center" width="150"></td>
55 <td align="center" width="150">参加⼯作时间</td>
56 <td align="center" width="150"></td>
57 <td align="center" width="150">现从事专业</td>
58 <td align="center" width="150" colspan="2"></td>
59 </tr>
60 <tr>
61 <td align="center" rowspan="6">主要简历</td>
62 <td align="center" colspan="2">起⽌年⽉</td>
63 <td align="center" colspan="2">在何单位</td>
64 <td align="center" colspan="2">任何职务</td>
65 </tr>
66 <tr>
67 <td align="center" colspan="2" ></td>
68 <td align="center" colspan="2"></td>
69 <td align="center" colspan="2"></td>
70 </tr>
71 <tr>
72 <td align="center" colspan="2" ></td>
73 <td align="center" colspan="2"></td>
74 <td align="center" colspan="2"></td>
75 </tr>
76 <tr>
77 <td align="center" colspan="2" ></td>
78 <td align="center" colspan="2"></td>
79 <td align="center" colspan="2"></td>
80 </tr>
81 <tr>
82 <td align="center" colspan="2" ></td>
83 <td align="center" colspan="2"></td>
84 <td align="center" colspan="2"></td>
85 </tr>
86 <tr>
87 <td align="center" colspan="2" ></td>
88 <td align="center" colspan="2"></td>
89 <td align="center" colspan="2"></td>
90 </tr>
在写代码之前，先了解⼀下html的表格标签，表格标签的格式如下：
效果如下
可以看到，效果并不明显，那么在table标签⾥加⼀个border=“1”的属性，为表格加上边框
90
</tr>91
<tr>92
<td align="center">业务专长及⼯作成果</td>93
<td align="center" colspan="6" width="150" height="150"></td>94
</tr>95
<tr>96
<td align="center">通讯地址</td>97
<td align="center" colspan="2"></td>98
<td align="center"></td>99
<td align="center" colspan="3"></td>100
</tr>101
<tr>102
<td align="center"></td>103
<td align="center" colspan="2"></td>104
<td align="center">Email 地址</td>105
<td align="center" colspan="3"></td>106
</tr>107
</table>108</body>109</html>
1
<table>2
<tr>3
<td>姓名</td>4
<td>年龄</td>5
<td>⾝⾼</td>6
</tr>7
<tr>8
<td>张三</td>9
<td>19</td>10
<td>1.78</td>11 </tr>12</table>
可以从上⾯的格式代码中看出，先是有个table标签包裹住了⼏个tr标签，然后tr标签⼜包裹住了⼏个td标签
table代表整个表格, 也就是⼀对table标签就是⼀个表格
tr标签代表整个表格中的⼀⾏数据, 也就是说⼀对tr标签就是表格中的⼀⾏
td标签代表表格中⼀⾏中的⼀个单元格, 也就是说⼀对td标签就是⼀⾏中的⼀个单元格
需要注意的是，除td外，有时也会⽤到th，th内部的⽂本通常会呈现为居中的粗体⽂本，⽽td元素内的⽂本通常是左对齐的普通⽂本。
可以形象的理解为，表格是先由⼀个个单元格拼凑成⼀⾏，然后再把每⼀⾏都拼成⼀个⼤的表格
表格标签有⼀个border边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
表格标签和列表标签⼀样, 它是⼀个组合标签, 所以table/tr/td要么⼀起出现, 要么⼀起不出现, 不会单个出现
在默认情况下，表格的宽与⾼由内容来撑起，也可以通过对其style的width以及height属性设置来调整宽⾼
举个例⼦：
这⾥我为第⼀⾏（即第⼀个tr）加了⼀个height:200px 设置了第⼀⾏⾼度为200px 并且为第⼀⾏第⼀列和第⼀⾏第⼆列的单元格设置了width：200px 效果如下
可以看到 第⼀⾏所有的单元格的⾼度都为200px ⽽第⼀列第⼆列的宽度都是200px 这可以通过增加单元格来更直观的显⽰
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论