分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

web-6. 组织页面的表格

发布时间:2023-09-06 02:19责任编辑:沈小雨关键词:暂无标签

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>的属性非常类似,都有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>

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

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

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

6.3 利用表格进行页面布局

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

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

web-6. 组织页面的表格

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved