陈力：传智播客古代珍宝币泡泡龙游戏开发第四讲：html表格元素

最新推荐文章于 2015-07-29 18:02:21 发布

zhenbaobe

最新推荐文章于 2015-07-29 18:02:21 发布

阅读量694

点赞数

本文链接：https://blog.csdn.net/zhenbaobe/article/details/46954497

版权

陈力：传智播客古代珍宝币泡泡龙游戏开发第四讲：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>

快速链接：