HTML初步学习7
关于表格
表格是用于排列内容的最佳手段，在HTML页面中，绝大多数页面都是表格排版，表格主要由 表格标<table>、行标记<tr>、单元格标记<td>构成
以下几点：
<!--表格宽度可调，高度同理 height ,不过宽度是总宽度。。。--> <!--对齐方式可调，align=center, left,right,不过放在table这，就是整体位置，放在tr标签内，就是调整单行--> <!--border——边框 bordercolor——边框颜色 cellspacing——内框宽度 cellpadding——文字和边框（上下左右）距离调整—> <!--背景颜色用bgcolor="#XXXXXX" 背景图片用background—> <!--上述的在table中的属性，在tr、td中也可以用(当然有些可能无效),当然，tr、td有特殊的valign用来调整行文字的垂直对齐方式—>
效果图1：
代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Table</title> 6 </head> 7 <body> 8 <!--表格宽度可调，高度同理 height ,不过宽度是总宽度。。。--> 9 <!--对齐方式可调，align=center, left,right,不过放在table这，就是整体位置，放在tr标签内，就是调整单行--> 10 <!--border————边框 bordercolor————边框颜色 cellspacing————内框宽度 cellpadding————文字和边框（上下左右）距离调整--> 11 <!--背景颜色用bgcolor="#XXXXXX" 背景图片用background--> 12 <!--上述的在table中的属性，在tr、td中也可以用(当然有些可能无效),当然，tr、td有特殊的valign用来调整行文字的垂直对齐方式--> 13 <table width="400" border="3" bordercolor="blue" cellspacing="10" cellpadding="10" background="images/2.jpg"> 14 <caption align="bottom"><b>表格标题_下面</b></caption> 15 <tr align="center" height="80" bordercolor="white" valign="middle" > 16 <th>加粗的表头</th> 17 <th>第一项</th> 18 <th>第二项</th> 19 </tr> 20 <tr align="right"> 21 <td>第一行</td> 22 <td>第一行-1</td> 23 <td>第一行-2</td> 24 </tr> 25 <tr align="left"> 26 <td>第二行</td> 27 <td>第二行-1</td> 28 <td>第二行-2</td> 29 </tr> 30 </table> 31 </body> 32 </html>
再加几点：
<!--跨行操作——colspan 当然，有行必有列，列用：rowspan—> <!--有时候虽然是对单元格的单个操作，但是，往往调整一个会牵扯到别的,由于23行的91.1下面28行的77作废了,但是40使得整行发生了改变—> <!--左上边框：bordercolorlight 右下边框 bordercolordark—> <!--表头标记，一个表元素只能有一个<thead>标记—> <!--tbody是用来统一设计表主体部分的样式—> <!--最后表格的嵌套我就不说什么了，就是td标签里套table标签，没啥好说的—>
效果图：
代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Table2</title> 6 </head> 7 <body> 8 <!--表格宽度可调，高度同理 height ,不过宽度是总宽度。。。--> 9 <!--对齐方式可调，align=center, left,right,不过放在table这，就是整体位置，放在tr标签内，就是调整单行--> 10 <!--border————边框 bordercolor————边框颜色 cellspacing————内框宽度 cellpadding————文字和边框（上下左右）距离调整--> 11 <!--背景颜色用bgcolor="#XXXXXX" 背景图片用background--> 12 <!--上述的在table中的属性，在tr、td中也可以用(当然有些可能无效),当然，tr、td有特殊的valign用来调整行文字的垂直对齐方式--> 13 <table width="400" border="3" bordercolor="blue" cellspacing="5" cellpadding="5" background="images/man2.jpg"> 14 <!--跨行操作——colspan 当然，有行必有列，列用：rowspan--> 15 <!--表头标记，一个表元素只能有一个<thead>标记--> 16 <thead bgcolor="#FFAAEE" valign="middle"> 17 <tr align="center"bordercolor="#FDACAA"><td colspan="3"><b>单元格操作+表格结构</b></td></tr> 18 </thead> 19 <!--tbody是用来统一设计表主体部分的样式--> 20 <tbody bgcolor="#EEAAFF" align="right"> 21 <tr align="center" height="49" bordercolor="#3CFED0" valign="middle"> 22 <!--虽然是对单元格的单个操作，但是，往往调整一个会牵扯到别的,下面的77作废了,但是40使得整行发生了改变--> 23 <th width="91.1">加粗的表头</th> 24 <th>第一项</th> 25 <th>第二项</th> 26 </tr> 27 <tr bordercolorlight="#FA3433" bordercolordark="#3343AF"> 28 <td width="77" height="40">第一行</td> 29 <td >第一行-1</td> 30 <td>第一行-2</td> 31 </tr> 32 <tr> 33 <td>第二行</td> 34 <td>第二行-1</td> 35 <td>第二行-2</td> 36 </tr> 37 </tbody> 38 <tfoot bgcolor="#FD3421"> 39 <tr align="right"> 40 <td colspan="3">我是表尾</td> 41 </tr> 42 <tfoot> 43 </table> 44 </body> 45 </html>
