html:table属性以及html简单合并单元格应用
一、table的常用属性1.tr、td、th表格常用table标签来定义。tr来定义行、td来定义表格内容、th来定义表头。 姓名年龄性别张三17男李四21男王晶19女 12345678910111213141516171819202122展示的效果如图所示: 加上th表头标签 姓名年龄性别张三17男李四21男王晶19女 12345678910111213141516171819202122大多数浏览器表头显示为粗体居中的文本。效果如图所示: 2.边框属性border、cellspacing 、cellpadding2-1、border:边框。设置table的表格,默认为0,是没有表格的,如果不定义这个属性,表格是不会显示的,会呈现如下图所示: 所以一般,我们会设置border=“1” 2-2、cellspacing:外间距设置边框与边框的距离。 设置cellspacing="0"的效果为(一般我们设置为0): 设置cellspacing="10"的效果为: 2-3、cellpadding:内间距边框与内容之间的距离。 cellpadding="10"的效果图 3.标题caption设置表格的标题。 效果如图: 4.对齐方式4-1、align=“center/left/right”当设置在table标签,则表格整体对齐方式发生变化。若设置在tr、td则单元格的文本内容对齐方式发生改变。 如:设置table整体align=“center” 没有设置前的效果图: 设置后的效果图: 同时还可以设置宽度width、高度height。同样也可以单独给tr、td设置宽度、高度,也可以给table整体设置宽度和高度。 效果如图: 5.合并单元格应用colspan合并列、rowspan合并行。 需要实现的效果图: 首先可以借助excel工具,来帮助我们进行行、列的个数统计。将excel的表格线拖动与效果图的行、列完全对齐。这样我们就可以得到多少行多少列。可以直观得到效果图有21行21列。 其次建立表格(我们这里使用快捷代码的方式生成表格) table>tr21>td211 按下tab键即可生成一个21行21列的表格,然后设置表格边框。1这里为了方便你可以看到效果,我设置了宽度和高度,效果如下。 接下来就进行表格的合并。比如第一行的代码:1234567表示空的单元格1联系电话占两列,所以colspan=“2”,同时,这里显示的 colspan=“2”,我们则需要删除本行也就是此个tr标签里面的两个单元格(td标签)。若rowspan等于3,则要删除后面两个tr里面的一个td。这里展示第6到8行的详细代码:…