表格的基本结构和内联框架
1.表格的基本结构
<table></table> 定义表格
<caption></caption> 定义表格标题
<thead> </thead> 表格头
<tr></tr> 定义行(只包含<th>、<td>元素)
<th></th> 定义表格眉页单元格(加粗居中)
<td></td> 定义单元格(列)
<tbody></tbody> 定义表格主体
</tfoot> </tfoot> 定义表格脚
表格的属性:
width 宽度 height 高度 align 在页面水平摆放位置 background 背景图片
bgcolor 背景颜色 border 宽度 bordercolor 宽度颜色
cellspacing 单元格间距 cellpadding 内容与边界空白格大小
<table border="5px" align="center" width="400px" height="200px" bgcolor="white" cellpadding="10px">
<caption>学生成绩单</caption>
<tr>
<th>姓名</th>
<th>学号</th>
<th>语文成绩</th>
<th>数学成绩</th>
<th>英语成绩</th>
</tr>
<tr>
<td>张三</td>
<td>001</td>
<td>60</td>
<td>60</td>
<td>60</td>
</tr>
<tr>
<td>李四</td>
<td>006</td>
<td>90</td>
<td>80</td>
<td>60</td>
</tr>
<tr>
<td>王五</td>
<td>009</td>
<td>90</td>
<td>90</td>
<td>100</td>
</tr>
</table>
页面显示图:
2.表格行和列属性
(1)行属性(有几行,就有几个 tr )
height 行高
align 行内容水平对齐
valign 行内容垂直对齐(属性值 top middle button )
bgcolor 行背景颜色
(2)列属性
height 列高
align 列内容水平对齐
valign 列内容垂直对齐(属性值 top middle button )
bgcolor 列背景颜色
colspan 单元格跨列(需要合并几个就写几个 如:colspan="2" 为合并两个)
rowspan 单元格跨行
注意:当合并单元格时,哪行的格突出就删去哪行的<td>或<th>
3.合并单元格(练习)
<table border="2px" width="300px" height="300px" align="center">
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
页面显示图:
table布局的练习如下:
<table border="5px" width="1300px" height="600px" align="center" cellspacing="0px" >
<tr>
<td rowspan="5" colspan="5" >
<img src="images/juhui.jpg" width="100%" />
</td>
</tr>
<tr>
<tr>
</tr>
<tr>
</tr>
</tr>
<tr align="center">
<td><b>我的站点</b></td>
<td colspan="2" >
<u><b>请在这里选择你想查看的内容</b></u> <a href="">首页</a> <a href="">读书</a> <a href="">教程</a> <a href="">视频</a> <a href="">娱乐</a> <a href="">美食</a>
</td>
</tr>
<tr>
<td rowspan="4">
<h4>所有商品</h4>
<ol>
<li><a href="">生奶</a></li>
<li><a href="">咖啡</a></li>
<li><a href="">啤酒</a></li>
<li><s>商品已经下架</s></li>
</ol>
</td>
<td rowspan="4" >
<h3>各大知识体系列表</h3>
<dl>
<dt>前端语言</dt>
<dd>html5</dd>
<dd>css3</dd>
<dd>javascript</dd>
<dt>服务器端语言</dt>
<dd>node.js</dd>
<dd>JAVA</dd>
<dd>php</dd>
</dl>
</td>
<td rowspan="4" >
<b><em>请点击以下"尚学堂"的二维码</em></b>
<a href=""><img src=""></a>
</td>
</tr> <tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="3" align="center">
<em>版权所有©尚学堂有限公司</em></td>
</tr>
</table>
页面显示图:
4.Iframe(Inner Frame)内联框架
属性:(也由内容撑开)
wdith 宽度
height 高度
name
src 路径框架
scrolling 是否在iframe中显示滚动条(属性值 yes no auto默认值)
frameborder 是否有显示框架周围边框( 1 有 0 无)
注意:用name来指向框架里的内容
<iframe src="http://www.baidu.com" width="100%" heighe="400px"
name="topiframe" frameborder="0"></iframe>
<!--<a href="http://www.sina.com.cn" target="topiframe">新浪</a>-->
<!--<a href="http://www.baidu.com" target="topiframe" >百度</a>-->
<iframe src="others/mune.html" width="300px" height="420px"
name="leftiframe"></iframe>
<iframe src="http://www.baidu.com" width="1020px"
height="420px" name="rightiframe"></iframe>
<h3>尚学堂信息</h3>
<ul>
<li>
<a href="jianjie.html" target="rightiframe">简介</a>
</li>
<li>
<a href="liliang.html" target="rightiframe">师资力量</a>
</li>
<li>
<a href="zhuanye.html" target="rightiframe">专业方向</a>
</li>
</ul>
显示的页面: