The problem of html table rendering of resume and cell width failure

The correct implementation code is as follows:

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
</head>
<body>
    <table width="800" border="1" align="center" cellpadding="10" cellspacing="0">
        <caption><h3>个人简历</h3></caption>
        <tr>
            <td colspan="5" bgcolor="#9FCDEA">个人资料</td>
        </tr>
		<colgroup>
		       <col width=20%></col>
		       <col width=20%></col>
		       <col width=20%></col>
			   <col width=20%></col>
			   <col width=20%></col>
		</colgroup>
        <tr>
            <td align="center">姓名</td>
			<td></td>
            <td align="center">婚姻</td>
			<td></td>
            <td rowspan="5"  align="center" valign="middle">照片</td>
        </tr>
		
        <tr>
            <td align="center">出 生</td>
			<td></td>
            <td align="center">政治面貌</td>
			<td></td>
        </tr>
        <tr>
            <td align="center">性 别</td>
			<td></td>
            <td align="center">民 族</td>
			<td></td>
        </tr>
        <tr>
            <td align="center">学 位</td>
			<td></td>
            <td align="center">移动电话</td>
			<td></td>
        </tr>
        <tr>
            <td align="center">专 业</td>
			<td></td>
            <td align="center">电子邮件</td>
			<td></td>
        </tr>
        <tr>
            <td colspan="5">地址:</td>
        </tr>
        <tr>
            <td colspan="5" bgcolor="#9FCDEA">教育背景</td>
        </tr>
        <tr>
            <td colspan="2">2012.9 - 2014.9</td>
            <td colspan="3">中国海洋大学本科</td>
        </tr>
        <tr>
            <td colspan="5" bgcolor="#9FCDEA">特长及兴趣爱好</td>
        </tr>
        <tr>
            <td colspan="5">篮球、足球、羽毛球、游泳、旅游</td>
        </tr>
        <tr>
            <td colspan="5" bgcolor="#9FCDEA">计算机能力</td>
        </tr>
        <tr>
            <td colspan="5">精通html div+css javascript jQuery php linux</td>
        </tr>
        <tr>
            <td colspan="5" bgcolor="#9FCDEA">外语水平</td>
        </tr>
        <tr>
            <td colspan="5">通过英语专业四六，能熟练进行听说读写译</td>
        </tr>
    </table>
</body>
</html>

effect:
Insert picture description here

The key to realize:
1) Use the colspan and rowspan attributes of the table to merge cells.
2) The use of colspan in the table will cause the column width to become invalid.
Because the general table will define a table-layout: fixed; to prevent td from being stretched by a series of characters, but if there are merged cells in the first row, the TD width definition will be invalid.
The best way is to add the following code at the top to control the td width

<colgroup>
       <col width=20%></col>
       <col width=20%></col>
       <col width=20%></col>
	   <col width=20%></col>
	   <col width=20%></col>
</colgroup>

Units can also use PX, put this code before tr, or before tbody.

If you delete the control code above, the rendering effect will be as follows:
Insert picture description here
the width of the cell becomes unpredictable.

The problem of html table rendering of resume and cell width failure

Guess you like