HTML-表格的制作与方法详解

HTML创建简历表格

table常用标签

1、table标签：声明一个表格

2、tr标签：定义表格中的一行

3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

table常用属性

1、border 定义表格的边框

2、cellpadding 定义单元格内内容与边框的距离

3、cellspacing 定义单元格与单元格之间的距离

4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right

5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

6、colspan 设置单元格水平合并

7、rowspan 设置单元格垂直合并

传统布局：

传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：

1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0

2、单元格里面嵌套表格

扫描二维码关注公众号，回复： 5501728 查看本文章

3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

4、通过属性或者css样式设置单元格中元素的样式

表格常用样式属性

border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格

需要制作表格样例:

在这里插入图片描述

代码实现表图如下:

基本情况
姓名	性别	照片
民族	出生日期
政治面貌	健康情况
籍贯	学历
电子信箱	联系电话

HTML代码如下:

<!DOCTYPE html>
<html>
<head>
</head>
<body >
     
            <table border="2" width="500" height="300">  <!--边框深度，宽度，高度-->
                    <tr><!--每一行开始标签-->
                          <th colspan="5" align="left"  valign="middle"><b>基本情况</b></th>
                          <!--水平跨五个格子 ，内容水平靠左 ，内容垂直对齐-->
                          <!--th 表示表头-->
                    </tr>
                     <tr>
                <!--td表示一行中一个小格子 ，width=“n%”表示这一列宽度占总宽度的%多少-->
                                  <td width="18%">姓名</td> 
                                  <td width="18%"></td>
                                  <td width="18%">性别</td>
                                  <td width="18%"></td>
                                  <td  rowspan="5" width="28%"  align="middle" > 照片</td> 
    <!--rowspan表示本格子所在垂直这一列5个格子合并一个新的格子 ， align表示内容水平居中-->
                     </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>