HTML5第三课时，表格应用以及表格属性

来源：互联网发布：省市区县json 编辑：程序博客网时间：2024/05/18 17:57

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>第三课时</title></head><body><!--table定义表格，tr定义行，td定义列，td当中写内容。th定义标题，字号加黑效果。--><table border="10" bordercolor="yellow" width="500px" height="200px"        style="border-collapse:collapse;" cellpadding="10px"       align="center" bgcolor="aqua">    <tr bgcolor="#faebd7" align="center">        <td bgcolor="#8a2be2" width="200px" height="150px">点卡充值</td>        <td>IP卡</td>        <td>网游</td>    </tr>    <tr>        <td align="center">移动</td>        <td>联通</td>        <td>电信</td>    </tr></table><br/><br/><table border="10" bordercolor="yellow" width="500px" height="200px"       cellspacing="0" >    <tr>        <td>点卡充值</td>        <td>IP卡</td>        <td>网游</td>    </tr>    <tr>        <td>移动</td>        <td>联通</td>        <td>电信</td>    </tr></table><table>    <tr><!--th字号加黑-->        <th>学号</th>        <th>姓名</th>        <th>数学成绩</th>        <th>语文成绩</th>        <th>英语成绩</th>    </tr>    <tr>        <td>50</td>        <td>50</td>        <td>50</td>        <td>50</td>        <td>50</td>    </tr>    <tr>        <td>50</td>        <td>50</td>        <td>50</td>        <td>50</td>        <td>50</td>    </tr>    <tr>        <td>50</td>        <td>50</td>        <td>50</td>        <td>50</td>        <td>50</td>    </tr></table><!--table标签当中常用的属性    1.border：给表格添加边框。        当border的数值增大的时候，只有外层的边框改变，单元格的边框始终是1px    2.bordercolor：边框颜色    3.width,height表格的宽高。    4.cellspacing：单元格与单元格之间的间隙距离        当cellspacing=“0”，只会使单元格间隙为0，但不会合并边框线。        表格边框合并：style="border-collapse:collapse"无需再写cellspacing="0"。        上面有两个方式的对比。    5.cellpadding：每个单元格的内容与边框线的距离"    6.align：表格在屏幕上的左中右位置显示，left  center right        注意：给表格加上align属性，相当于让表格浮动。        会直接打破表格后面元素的原有排列方式    7.background:background="../img/mh.jpg"设置背景图片        等同于style="background-image:url('../../img/mh.jpg');"背景图片会覆盖背景颜色    8.bgcolor：背景色，等同于style="background-color:;"    标准的写法放在style里面。--><!--tr和td的相关属性    1.width、height：单元格的宽高。    2.bgcolor：单元格的背景颜色。    3.align：left center right 单元格中的文字，水平对齐方式    4.valign：top center bottom 单元格中的文字，垂直对齐方式    5.nowrap="nowrap"单元格中文字不允许换行。    注意：        1、当表格属性与行列属性冲突时，以行列属性为准。（近者优先）        2、表格的align属性，是控制表格自身在浏览器的显示位置；            行和列的align属性，是控制单元格中文字在单元格中的对齐方式        3、表格的align属性，并不影响表格内，文字的水平对齐方式            tr的align或者valign属性，可以控制一行中所有单元格的水平或者垂直对齐方式。--><table border="1" align="center">    <tr>        <td>第一行第一列</td>        <td colspan="3">第一行第二列</td>    </tr>    <tr>        <td rowspan="3">第二行第一列</td>        <td>第二行</td>        <td>第二行</td>        <td>第二行</td>    </tr>    <tr>        <td>第三行</td>        <td>第三行</td>        <td>第三行</td>    </tr>    <tr>        <td>第四行</td>        <td>第四行</td>        <td>第四行</td>    </tr></table><!--colspan表示跨多少列，rowspan表示跨多少行--><br/><br/><table border="1" align="center">    <tr>        <td colspan="4" align="center">电子产品类</td>    </tr>    <tr>        <td>手机</td>        <td>电脑</td>        <td>笔记本</td>        <td>耳机</td>    </tr>    <tr>        <td>数码相机</td>        <td>移动硬盘</td>        <td>充电宝</td>        <td>数据线</td>    </tr>    <tr>        <td colspan="2" align="center">家电类</td>        <td colspan="2" align="center">家具类</td>    </tr>    <tr>        <td>冰箱</td>        <td>洗衣机</td>        <td>木床</td>        <td>沙发</td>    </tr>    <tr>        <td>消毒柜</td>        <td>空调</td>        <td>床头柜</td>        <td>衣柜</td>    </tr>    <tr>        <td colspan="3" align="center">文具类</td>        <td>饮料类</td>    </tr>    <tr>        <td>铅笔盒</td>        <td>点读机</td>        <td>课后习题</td>        <td>芬达</td>    </tr>    <tr>        <td>计算器</td>        <td>算珠学</td>        <td>记忆王</td>        <td>雪碧</td>    </tr></table><br/><br/><table border="1" align="center">    <tr>        <td rowspan="2">张三</td>        <td>语文</td>        <td>98</td>    </tr>    <tr>        <td>数学</td>        <td>95</td>    </tr>    <tr>        <td rowspan="2">李四</td>        <td>语文</td>        <td>88</td>    </tr>    <tr>        <td>数学</td>        <td>91</td>    </tr></table><br/><br/><table border="1" bordercolor="blue" align="center" width="500px" height="300px">    <caption>表格头！！</caption>    <tr>        <td rowspan="6" style="background-image: url('../../image/mh.jpg')"></td>        <td rowspan="3"></td>        <td rowspan="2"></td>        <td></td>    </tr>    <tr>        <td></td>    </tr>    <tr>        <td rowspan="2"></td>        <td></td>    </tr>    <tr>        <td rowspan="3"></td>        <td></td>    </tr>    <tr>        <td rowspan="2"></td>        <td></td>    </tr>    <tr>        <td></td>    </tr></table><table width="500" align="center" >    <colgroup style="background-color: aqua">        <col/><!--第一行属性-->        <col/><!--第二行属性-->    </colgroup>    <col style="background-color: blueviolet;"/><!--第三行属性-->    <caption align="left">表格标题</caption>    <thead>    <tr>        <th>头1</th>        <th>头2</th>        <th>头3</th>    </tr>    </thead>    <tbody>    <tr>        <td>111</td>        <td>111</td>        <td>111</td>    </tr>    <tr>        <td>222</td>        <td>222</td>        <td>222</td>    </tr>    </tbody>    <tbody>    <tr>        <td>111</td>        <td>111</td>        <td>111</td>    </tr>    <tr>        <td>222</td>        <td>222</td>        <td>222</td>    </tr>    </tbody>    <tfoot>    <tr>        <td>尾1</td>        <td>尾2</td>        <td>尾3</td>    </tr>    </tfoot></table>

<!--表格的结构化        完整表格结构：caption thead tbody tfoot        无论个部分在表格什么位置，显示时，caption均在表格外最上方，        thead均会在表格内最上方        tfoot均会在最下方         <colgroup style="background-color: aqua">        <col/> 第一列属性        <col/> 第二列属性        </colgroup>        <col style="background-color: blueviolet;"/>第三列属性        -->
</body></html>

0 0