静态网页制作教程 第三章 表格.pptxVIP

第三章 表格;在网页中，表格的运用是非常重要的技巧。在html中，表格的建立主要就运用table、tr、td、th四种标记来显示完成的 1.table和/table标记：用于表示一个表格的组件。一个表格组件将由数个行tr、存储格td、标题格th子组件所组成。 2.tr/tr：用于定义表格的一行，一组tr标记内通常包含数组由td或th标记所定义的存储格。 3.td/td用于定义表格的存储格。 4.th/th：用于定义表格的标题存储格，此存储格中的文字将以粗体的方式显示。;在一个最基本的表格组件中，必须包含一组table标记，一组tr标记与一组td标记。语法如下： table trtd/td/tr /table;一.创建一个简单表格;1.创建一个简单的表格;2.给表格添加一个标题;如果要将标题置于表格下方，则将caption表格标题/caption置于/table标记之前。如： table …… caption表格标题/caption /table 我们还可以像对待其他文本一样，格式化caption和/caption中的文本 caption表格标题/caption;3.把表格的第一行设计为表头;4.给单元格和表格元素定义数据;tr标记的用法同th类似，表格是用来创建表格中行的。如实例所示，表格的每一行都是由tr标记来建立。 根据需要，可把某个单元格设置成空数据格，即不输入数据到该格中，也就是在td标记之后不输入数据。 trtd李四tdtd工程师/tr;二.定义单元格的高度和宽度;table width=300 height=50 caption个人资料/caption trth姓名th居住地th职业/tr trtd张三td北京td学生/tr trtd李四td上海td工程师/tr trtd王五td深圳td老师/tr /table ;table width=50% height=40% caption个人资料/caption trth姓名th居住地th职业/tr trtd张三td北京td学生/tr trtd李四td上海td工程师/tr trtd王五td深圳td老师/tr /table ;两者设置宽度和高度的区别，当改变浏览器窗口大小的时候，用百分比设置的表格会随浏览器窗口的变化而变化，而通过像素设定宽度和高度的表格的大小不会变化。 以上是对整个表格的所有单元格的高度和宽度的控制，也可以在tr标记中添加width和height属性来控制某一行的宽度和高度。如： tr width=300 height=100/tr tr width=40% height=20%/tr;三. 控制表格的边框及边框线;table border=10 width=500 height=500 caption设置表格的边框/caption trth姓名th居住地th职业/tr trtd张三td北京td学生/tr trtd李四td上海td工程师/tr trtd王五td深圳td老师/tr /table ;4.设置表格背景颜色与边框厚度颜色 table标记还有两个属性 Bgcolor属性：控制表格的背景颜色 bordercolor属性：控制表格厚度的颜色 table bgcolor=blue bordercolor=red;5.设置表格的对齐方式 表格对齐方式有两种：水平方向和垂直方向 align(水平方向)： Align=left（水平左对齐） Align=right(水平右对齐) Align=center(水平居中对齐) Valign(垂直方向) Valign=top(垂直顶部对齐) valign=bottom(垂直底部对齐) Valign=baseline(垂直一条公共基线对齐) valign=middle(垂直居中对齐);(1).align属性可以放置于table标记中，控制整个表格在网页中的对齐方式。 html body table align=left trtd靠左对齐表格/tr /tablebr table align=center trtd居中对齐表格/tr /tablebr table align=right trtd靠右对齐表格/tr /tablebr /body /html;(2).align和valign属性也可以在tr标记中控制对齐方式 html body table tr align=left valign=toptd张三td北京td学生/tr tr algin=center valign=bottomtd李四td上海td工程师/tr tr align=right valign=centertd王五td深圳td老师/tr /table /body /html;四.创建跨单元格的存储格;html body table border=3 tr