珍宝币 泡泡龙游戏开发第四讲:html表格元素"/>
陈力:传智播客古代 珍宝币 泡泡龙游戏开发第四讲:html表格元素
陈力:传智播客古代 珍宝币 泡泡龙游戏开发第四讲:html表格元素
摘要:通过前节《陈力:传智播客古代 珍宝币 泡泡龙游戏开发第三讲:html符号实体、超链接》 学习了html符号实体、超链接、锚标签和 Href 属性等内容。知道了空格字符实体用 表示,超链接用<a>(锚)标签来创建,target有”_self,_blank,_top,_parent”几种。在锚名称前加了#添加到 URL 的最后,就可以直接链接到锚所在的节。本章将从table元素进行较详细的讲解。tr表示一行,td表示一列。Rowspan表示合并行。Colspan表示合并列。等等内容。本节陈力:传智播客古代 珍宝币 泡泡龙游戏开发第四讲:html表格元素。
在CSS+DIV之前,对网页布局要求不高,通常使用table布局(即使用表格来显示数据,同时用于布局)。
用<table> 标签来定义表格。表格由 <tr> 标签定义行,每行用<td>标签定义列,也就是数据单元格的内容。在表格中,可以显示文本、图片、列表、水平线、段落、表单、表格等等内容。
<table border="1px">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
</table>
边框:在默认情况下,表格是不显示边框属性的。边框属性用border来表示。比如<table border=”1px”><tr><td>内容</td></tr></table>
表头:表格的表头使用<th>标签进行定义。
注意:空的单元格的边框不被显示。(在Mozilla Firefox中则将整个边框显示)为了避免这种情况,在空单元格中添加一个空格占位符以便显示边框效果。
border="0" 时,也表示没有边框,
显示垂直表头:
<h4>垂直的表头:</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 855</td>
</tr>
</table>
表格标题:<caption>我的标题</caption>
<table border="6">
<caption>表格标题</caption>
<tr>
<td>软件设计</td>
<td>网站建设</td>
<td>毕业设计</td>
</tr>
<tr>
<td>媒体文案</td>
<td>企业软件</td>
<td>股票软件</td>
</tr>
</table>
软件设计,网站建设
跨行或跨列:colspan表示横跨的列数。rowspan表示横跨的行数。
<h4>横跨两列的单元格:</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>横跨两行的单元格:</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
软件设计,网站建设
注意:表示之内可以有表格或者其它元素。也可以有<li></li>
单元格边距: <table border="1"cellpadding="10">表示创建单元格内容与其边框之间的空白。
单元格间距(Cell spacing) :<table border="1" cellspacing="10">表示单元格之间的距离。
背景颜色:<table border="1" bgcolor="red">
背景图像:<table border="1" background=" ">
单元背景:
<table border="1">
<tr>
<td bgcolor="red">First</td> <td>Row</td>
</tr>
<tr>
<td background=" " tppabs=" ">
Second</td> <td>Row</td>
</tr>
</table>
在表格单元中排列内容:align="left"、right、center
框架(frame)属性 : 控制围绕表格的边框.
<table frame="box"> frame="above": frame="below": "hsides": "vsides":
Table应用案例:
软件设计,网站建设
<html>
<title>俺第一个实例</title>
<head>
</head>
<body>
<Center>
成绩表
</center>
<br/>
<!--表格-->
<table align="center" align="center" bordercolor="579AFE" height="10px" border="3px" width="500px">
<tr align="center">
<td>项目</td>
<td colspan="5" align="center">上课</td>
<td colspan="2" align="center">休息</td>
</tr>
<tr bgcolor="pink" align="center">
<th>星期</b></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr align="center">
<td rowspan="4" align="center">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="4" align="center">休息</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>化学</td>
<td>语文</td>
<td>体育</td>
<td>计算机</td>
<td>英语</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>政治</td>
<td>英语</td>
<td>体育</td>
<td>历史</td>
<td>地理</td>
<td>计算机1</td>
</tr>
<tr></tr>
<tr align="center" >
<td rowspan="2"
>下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="2">休息</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
</table>
</body>
</html>
快速链接:
陈力:传智播客古代 珍宝币 泡泡龙游戏开发第四讲:html表格元素
陈力:传智播客古代 珍宝币 泡泡龙游戏开发第三讲:html符号实体、超链接
更多推荐
陈力:传智播客古代 珍宝币 泡泡龙游戏开发第四讲:html表格元素
发布评论