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

  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. 组织页面的表格的主要内容,如果未能解决你的问题,请参考以下文章

如何使用默认的组织模式电子表格自动求和行为?

如何合并来自多个 Google 表格的数据并组织/过滤它?

如何在netezza中找到组织表格的列?

组织模式乳胶导出:围绕表格包装文本

如何使用ProcessOn制作“组织结构图”

Laravel 8:在空的多对多关系中使用枢轴时出错