web-6. 组织页面的表格
Posted free-锻炼身体
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web-6. 组织页面的表格相关的知识，希望对你有一定的参考价值。
6. 组织页面的表格
6.1 表格的概念与基本结构
表格就是一些用来划分称为矩形区域的类似于栅格的结构。最初，表格是用来组织并显示相关数据的，这种表现形式可以极大地增强数据的可视性。在html语言中，表格的另一个作用就是用来进行页面布局。
表格可以相互嵌套。
表格的格式如下;
<table>
<tr>
<td>......</td>
......
</tr>
<tr>
<td>......</td>
......
</tr>
......
</table>
其中<table>是表格标记，<tr>是行标记，<td>是单元格标记。
例如：
<html>
<head>
<title>表格实例</title>
</head>
<body bgcolor="#dddddd">
<div align=center>
<br><br>
<table border=2 width=600 height=300>
<caption><h2>课程表</h2></caption>
<tr>
<th></th><th>星期一</th><th>星期二</th>
<th>星期三</th><th>星期四</th><th>星期五</th>
</tr>
<tr>
<th>第1大节</th><th>数学</th><th>英语</th>
<th>数学</th><th>英语</th><th>哲学</th>
</tr>
<tr>
<th>第2大节</th><th>数学</th><th>英语</th>
<th>数学</th><th>英语</th><th>哲学</th>
</tr>
<tr>
<th>第3大节</th><th>数学</th><th>英语</th>
<th>数学</th><th>英语</th><th>哲学五</th>
</tr>
</table>
</div>
</body>
</html>
6.2 常用表格标记及其使用方法
- <table>标记，一个表格的所有的内容都包含在<table>和</table>之间
<table border=”” width=”” heigth=”” bgcolor=”” align=””>
五个参数分别对应：边框、宽度、长度、背景色、对齐方式
- <tr>标记，用来标识表格中的行。语法格式如下：
<tr align=”” bgcolor=””>
......
</tr>
- <td>与<th>
<td>标记用来标识表格中的单元格，<th>用来标识表格中的标题单元格。标题单元格是一些内容居中、用粗体显示的单元格。
<th>和<td>属性与<table>的属性非常类似，都有bgcolor、width、heigth属性。另外，<td>与<th>标记还有跨行属性rowspan与跨列属性colspan。
<th>标记是居中显示，所以没有align属性。
例子：
<html>
<head>
<title>表格实例</title>
</head>
<body bgcolor="#dddddd">
<div align=center>
<br><br>
<table border=2 width=70% height=50%>
<caption><h2>旅游计划表</h2></caption>
<tr bgcolor="#616DDC">
<th></th><th>第一周</th><th>第二周</th>
<th>第三周</th><th>第四周</th>>
</tr>
<tr>
<th>星期一到星期五</th>
<td>到北京旅游</td><td>到上海旅游</td>
<td>到澳门旅游</td><td>到澳门旅游</td>
</tr>
<tr>
<th>第2大节</th><th>数学</th><th>英语</th>
<th>数学</th><th>英语</th>
</tr>
</table>
</div>
</body>
</html>
- <caption>标识，用来标识表格的标题语句。
<caption align=””>......</caption>
用来设置表格标题的位置，属性值是“top”（位于表格的上方）或者“bottom”（位于表格的下方），默认值是“top”。
6.3 利用表格进行页面布局
在设计HTML的时候，一般编程人员会在之上绘制出一个页面草稿。在草稿中，主要应该标识出页面的大概布局与主要元素的放置位置。
在进行表格的布局时，可以进行表格的嵌套。
以上是关于web-6. 组织页面的表格的主要内容，如果未能解决你的问题，请参考以下文章