学习web前端历程（四）

表格的基本结构和内联框架

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>&nbsp;<a href="">首页</a>&nbsp;<a href="">读书</a>&nbsp;<a href="">教程</a>&nbsp;<a href="">视频</a>&nbsp;<a href="">娱乐</a>&nbsp;<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>版权所有&copy;尚学堂有限公司</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>

显示的页面：