4. 表格的嵌套 表格嵌套就是表格里再用表格
再以mollychicken的博举例,想做成她那样子的模板,思路是: 顶上图片那里用一个表格(1),高度设置不要小于图片的高度:

|
表格(1):logo图片 表格宽度width=1200 高度height=400 |
table的代码: <table width=1200 height=400><tr><td></td></tr></table>
主体是一个有3列/columns的表格(2):

只要定宽度即可 td width=250 |
td width=700(定不定义没关系) |
td width=250 |
代码: <table width=1200><tr><td width=250></td><td></td><td width=250></td></tr></table>
表格(3),根据内容设置若干行/rows,只1列,宽度设置成240:
| 题目1 |
| .............. |
| 内容1 |
| 题目2 |
| .............. |
| 内容2 | 代码: <table width=240><tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr></table>
表格(4):
| 题目3 |
| .............. |
| 内容3 |
| 题目4 |
| .............. |
| 内容4 |
表格(3)嵌在表格(2)最左边的column里,表格(4)嵌在表格(2)最右边的column里,这就是"嵌套":
| 题目1 |
| .............. |
| 内容1 |
| 题目2 |
| .............. |
| 内容2 | |
中间放日志内容 |
| 题目3 |
| .............. |
| 内容3 |
| 题目4 |
| .............. |
| 内容4 | |
代码: <table width=1200><tr><td width=250> <table width=240><tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr></table> </td> <td></td> <td width=250> <table width=240><tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr></table> </td></tr></table>
5. 表格的属性 属性大不过表格边框的宽度啦,对齐啦....上面说的width、height也是。
用pinbu的编辑器可以定义出大部分表格的属性,但只能到源码状态下去编辑行和列的宽、高等某些属性。
尝试用编辑器划表格(3):

出来的表格是这样子,再输入一些内容后:
代码: <TABLE borderColor=#99aa55 cellSpacing=2 cellPadding=3 width=240 align=center border=1> <TBODY> <TR><TD>三天</TD> </TR> <TR><TD>不学习</TD> </TR> <TR><TD> <P align=center>赶不上</P></TD> </TR> <TR><TD> <P align=center>刘</P></TD></TR> <TR><TD><P align=right>少</P></TD></TR> <TR><TD><P align=right>奇 </P></TD></TR></TBODY></TABLE>
注: * border是边框粗细,borderColor是边框颜色 * cellSpacing、cellPadding分别是单元间距、单元边距(我说不好确切是怎么回事),大概是如果设定了大于0的值,可以避免表格里的字紧贴边框线。 * 是空格的html符号 * <TBODY></TBODY>不知道做啥用 * 表格里的内容我用了编辑器上的对齐命令,仔细看,"赶不上 刘"是<p>里面定义。 也可以定义tr或td,达到一样的效果: <tr align=center>或<td align=right> 注的注:align是水平方向上对齐命令,valign是竖直方向上的对齐: align=left(center或right),valign=top(middle或bottom)
布布同学可以测试一下这个表格: <table width=240 height=200 align=right valign=bottom><tr><td align=center valign=middle>吃饭了没</td></tr></table>
作业: 无论用任何手段,请划出这样一个嵌套表格:
或者尝试理解一下这个表格的代码: <TABLE borderColor=#000000 height=400 cellSpacing=0 cellPadding=0 width="90%" align=center border=1> <TBODY> <TR> <TD vAlign=top> <P>日志内容</P></TD> <TD vAlign=top width=200> <TABLE borderColor=#cccccc height=300 width=150 align=center bgColor=#aaaaaa border=1> <TBODY> <TR><TD vAlign=top>最新</TD> </TR> <TR><TD vAlign=top>评论</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> |