码迷,mamicode.com
首页 > Web开发 > 详细

web-6. 组织页面的表格

时间:2018-10-27 13:15:18      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:第二周   显示   方法   ...   计划表   ali   一个   布局   编程人员   

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 常用表格标记及其使用方法

  1. <table>标记,一个表格的所有的内容都包含在<table></table>之间

<table border=”” width=”” heigth=”” bgcolor=”” align=””>

五个参数分别对应:边框、宽度、长度、背景色、对齐方式

 

  1. <tr>标记,用来标识表格中的行。语法格式如下:

<tr align=”” bgcolor=””>

......

</tr>

  1. <td><th>

<td>标记用来标识表格中的单元格,<th>用来标识表格中的标题单元格。标题单元格是一些内容居中、用粗体显示的单元格。

<th><td>属性与<table>的属性非常类似,都有bgcolorwidthheigth属性。另外,<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>

  1. <caption>标识,用来标识表格的标题语句。

<caption align=””>......</caption>

用来设置表格标题的位置,属性值是top”(位于表格的上方)或者“bottom”(位于表格的下方),默认值是“top”。

 

6.3 利用表格进行页面布局

在设计HTML的时候,一般编程人员会在之上绘制出一个页面草稿。在草稿中,主要应该标识出页面的大概布局与主要元素的放置位置。

在进行表格的布局时,可以进行表格的嵌套。

 

web-6. 组织页面的表格

标签:第二周   显示   方法   ...   计划表   ali   一个   布局   编程人员   

原文地址:https://www.cnblogs.com/free-1122/p/9860632.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!