如何用HTML制作一个3行3列的表格,如何利用表格制作网页
将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中,还是在网页设计中,表格通常都可以使信息更容易理解。HTML 具有很强的表格功能,使用户可以方便地创建出各种规格的表格,并能对表格进行特定的修饰,从而使网页更加生动活泼。HTML 表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列,从而获得特定的表格效果。
表格在网页设计中的地位非常重要,可以说如果您表格用不好的话,就不可能设计出出色的网页。大多数初学者一开始就接触表格,对表格都有一定的了解,但是要实现真正细致甚至强大的功能,仔细理解table的代码结构至关重要!我们将在这里详细介绍表格各种常用的标记、技巧以及表格使用中的问题,了解和掌握了这些内容,你将发现,table原来是这样的亲切易用!
一、创建基本的表格
一个表由<table>开始, </table>结束,表的内容由 <tr>,<th>和<td>定义。<tr>说明表的一个行,表有多少行就有多少个<tr>;<th>说明表的列数和相应栏目的名 称,有多少个栏就有多少个<th>;<td>则填充由<tr>和 <th>组成的表格。
表格重要的基本标记不多,但每个标记都有很多的属性,考虑到一下子把这些属性都列出来,可能让初学者感到无从下手,所以我们还是从表格的外观(即浏览器中显示的表格的样式)来了解基本的属性。
在讲解之前,我们先来看看表格的基本构造。 下图是一个3行3列的表格。
这里面有两个概念要弄明白:表格与单元格。他们的关系是整体与局部的关系,如同砌墙的砖和砌好的墙一样。在上面3行3列的表格中一共有9个单元格。由于我们后面将提到的表格属性和单元格属性有很多是相同的,所以一定要分清楚。前面已经说过表格的基本标记为<table>、<tr>、<td>,可以先树立这样一个概念:描述整个表格的属性标记放在<table>里,描述单元格的属性标记放在<tr>、<td>里。 有这样一个概念后,我们学习起来就可能简单些。
1、表格、单元格的大小,表格边框的宽度、颜色,单元格边框的颜色
表格以及单元格的大小是用“width=#”和“height=#”属性说明,“width=#”表示宽,“height=#”表示高,,#是以象素或者百分比为单位的数字。表格边框的宽度是用“border=#”属性说明,,#为宽度值,单位是象素,表格边框的颜色是用“bordercolor="#"属性说明,#是16进制的6位数,格式为rrggbb,分别表示红、 绿、兰三色的分量。或者是16种已定义好的颜色名称,参见文本颜色,单元格边框的颜色属性与表格的相同,但只适用于IE。下面是一个宽为300,高为80,边框宽为4,边框颜色为“FF0000”的一行两列表格,其中个单元格的宽为200,高为80,第二个单元格的边框颜色为“0000FF”。
代码如下:
<table border="4" width="300" height="80" bordercolor="#FF0000">
<tr>
<td width="200" height="80"> </td>
<td bordercolor="#0000FF"> </td>
</tr>
</table>
2、表格的水平摆放位置
表格的水平摆放位置是用align="#" 属性说明的,#为left(左对齐), right(右对齐), center(居中)。分别见下例,注意这三个表格与边界的位置关系:
左对齐
center
右对齐
第三个表格的代码如下:
<table width="80" border="1" align="right" height="30">
<tr>
<td>右对齐</td>
</tr>
</table>3、单元格里内容的位置属性
水平对齐方式,用align="#"属性说明,#为left(左对齐), right(右对齐), center(居中);垂直对齐方式,用valign="#"属性说明,#为top(上对齐), bottom(下对齐), middle(居中)。分别见下例,注意单元格里的内容与边框的的位置关系:
水平对齐方式:
内容左对齐
内容居中
内容右对齐
代码如下:
<table width="450" border="1">
<tr>
<td width="150">
<div align="left">内容左对齐</div>
</td>
<td width="150">
<div align="center">内容居中</div>
</td>
<td>
<div align="right">内容右对齐</div>
</td>
</tr>
</table>
垂直对齐方式
内容上对齐
内容居中
内容下对齐
代码如下:
<table width="150" border="1">
<tr>
<td height="40" width="146" valign="top">内容上对齐</td>
</tr>
<tr>
<td height="40" width="146" valign="middle">内容居中</td>
</tr>
<tr>
<td height="40" width="146" valign="bottom">内容下对齐</td>
</tr>
</table>
4、表格的背景色、背景图片,单元格的背景色、背景图片
背景色属性:bgcolor="#" ,背景图片属性:background="#"。
见下例:
代码如下:
<table width="450" border="1" bgcolor="#539996" bordercolor="#FFFFFF" height="90">
<tr>
<td> </td>
<td background="Back01.gif"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#FF0000"> </td>
<td> </td>
</tr>
</table>
说明:在上例中,整个表格的背景色是 bgcolor="#539996" ,行第二列的单元格背景图片是background="Back01.gif" ,第三行第二列的单元格背景色是 bgcolor="#FF0000" ,根据显示结果可以看出:设置表格的背景色后再设置单元格的背景色或背景图片,将优先显示单元格的属性。
5、表格属性cellspacing、cellpadding
5、表格属性cellspacing、cellpadding
cellspacing属性用来表格各单元格之间的空隙。此属性的参数值是数字,表示单元格间隙所占的像素点数。
我们来看下面的两个表格:
上面个表格的单元格之间没有空白距离,而第二个的单元格之间有很大的空白距离,我们来比较一下他们的源代码:
个表格的代码:
<table width="200" cellspacing="0" border="1" bordercolor="#000000">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
第二个表格的代码:
<table width="200" cellspacing="8" border="1" bordercolor="#000000">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
比较代码,上边两个表格中只有 cellspacing的设置不同,一个为“0”,一个为“8”,显示的结果就是个表格的每个单元格之间的距离为0(在本例中由于我们为了显示的方便,将表格边框设为“1”,所以单元格的真实距离是“2”,若将表格边框设为“0”,则单元格 的距离就是0了,第二个单元格同理),第二个表格的每个单元格之间的距离为8。
cellpadding属性用来单元格内容与单元格边界之间的空白距离的大小。此属性的参数值也是数字,表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。我们先来看看这个例子:
我们来看下面两个表格:
网页教学网
网页教学网
个表格单元格的内容与单元格边界之间没有空白距离,而第二个表格单元格的内容与单元格边界之间有空白距离,我们来比较一下他们的源代码:
个表格的代码:
<table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="0">
<tr>
<td width="120">网页陶吧</td>
<td> </td>
</tr>
</table>
第二个表格的代码:
<table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="15">
<tr>
<td width="120">网页陶吧</td>
<td> </td>
</tr>
</table>
两个表格只有红色部分代码不同。个表格中"网页陶吧"这几个字离它所在的单元格为0,那是因为设置了cellpadding="0"的原因.个表格中的"网页陶吧"这几个字离它所在的单元格比较远,那是因为cellpadding="15",也就是说"网页陶吧"离它所在的单元格的边界的距离为20像素。简单的说,cellpadding的值等于多少,那表格内的单元格从自身边界开始向内保留多少空白,单元格里的元素永远都不会进入那些空白里。
我们在以后的篇幅中会大量用到这两个属性,所以请大家不要弄混乱了, 为了形象的理解,请参考下图:
文中图片素材来源网络,如有侵权请联系删除
如何用HTML制作一个3行3列的表格,如何利用表格制作网页相关推荐
- java制作九行九列表格_将文中后9行文字转换成一个9行4列的表格,设置表格居中,表格列宽为2.5厘米..._考试资料网...
问答题在考生文件夹下打开文档word.docx,按照要求完成下列操作并以该文件名(word.docx)保存文档. [文档开始] 2009年北平市中考招生计划低于10万人 晨报讯伴随初中毕业生人数连年下 ...
- Algs4-1.1.13编写一段代码,打印出一个M行N列的二维数组的转置(交换行和列)
1.1.13编写一段代码,打印出一个M行N列的二维数组的转置(交换行和列). public class Test { public static void main(String[] arg ...
- m行n列最大值和最小值C语言,找数组最值 按如下函数原型编程从键盘输入一个m行n列的二维数...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 找数组最值 按如下函数原型编程从键盘输入一个m行n列的二维数组,然后计算数组中元素的最大值及其所在的行列下标值.其中,m和n的值由用户键盘输入.已知m和n ...
- C语言试题二十三之编写一个函数void function(int tt[m][n],int pp[n]),tt指向一个m行n列的二维函数组,求出二维函数组每列中最小元素,并依次放入pp所指定一维数组中
1. 题目 请编写一个函数void function(int tt[m][n],int pp[n]),tt指向一个m行n列的二维函数组,求出二维函数组每列中最小元素,并依次放入pp所指定一维数组中.二 ...
- C语言(CED)对于一个2行N列的走道。现在用1*2,2*2的砖去铺满。问有多少种不同的方式(递归求解)
又涉及到递归问题,这道题的大致内容是这样的: (请用递推方式求解)对于一个2行N列的走道.现在用1*2,2*2的砖去铺满.问有多少种不同的方式.下图是一个2行17列的走道的某种铺法. 提示:观察前n个 ...
- R语言使用diag函数生成一个N行N列的单位矩阵
R语言使用diag函数生成一个N行N列的单位矩阵 目录 R语言使用diag函数生成一个N行N列的单位矩阵 R语言是解决什么问题的? R语言使用diag函数生成一个N行N列的单位矩阵 安利一个R语言的优 ...
- 13.请编一个函数void fun(int tt[M][N],int pp[N]),tt指向一个M行N列的二维数组,求出二维数组每列中最小元素,并依次放入pp所指一维数组中。
13.请编一个函数void fun(int tt[M][N],int pp[N]),tt指向一个M行N列的二维数组,求出二维数组每列中最小元素,并依次放入pp所指一维数组中.二维数组中的数已在主函数中 ...
- C语言 输入一个5行5列的数组。1.求数组主对角线上元素的和。2.求出辅对角线上元素的积。3.找出主对角线上最大的值及其位置
C语言 输入一个5行5列的数组.1.求数组主对角线上元素的和.2.求出辅对角线上元素的积.3.找出主对角线上最大的值及其位置 主对角线是什么: 在一个n阶方阵(或是n阶行列式)中,从左上角到右下角这一 ...
- 按如下函数原型编程从键盘输入一个m行n列的二维数组,然后计算数组中元素的最大值及其所在的行列下标值。其中,m和n的值由用户键盘输入。已知m和n的值都不超过10。
题目:按如下函数原型编程从键盘输入一个m行n列的二维数组,然后计算数组中元素的最大值及其所在的行列下标值.其中,m和n的值由用户键盘输入.已知m和n的值都不超过10. void InputArray( ...
- 螺旋矩阵一个n行n列的螺旅矩阵可由如下方法生成:从矩阵的左上角(第1行第 1列)出发,初始时向右移动;如果前方是未曾经过的格子,则继续前进,否则右转;重复上述操作直至经过矩阵中所有格子。
螺旋矩阵 一个n行n列的螺旅矩阵可由如下方法生成: 从矩阵的左上角(第1行第 1列)出发,初始时向右移动:如果前方是未曾经过的格子,则继续前进,否则右转:重复上述操作直至经过矩阵中所有格子.根据经过顺 ...
最新文章
- java B2B2C 源码多租户电子商城系统-Spring Cloud组件详解
- Webpack学习-Loader
- python恶搞表情包-Python开发个人专属表情包网站,表情在手,天下我有
- Angular组件--动态组件
- Cisdem PDFMaster for Mac(PDF批量转换工具)
- 【OpenCV学习笔记】【函数学习】三(cvGetCaptureProperty函数)
- 2007年8月28日 月全食 照片
- 数据结构(C语言)超详细视频教程
- 2021年中国柠檬酸供需现状与行业前景分析,受出口景气度上升价格持续上涨「图」
- 0基础转行3D建模,从月薪3000到15k,我整理的超全学习指南
- Laya发布魅族小游戏,调试前步骤
- Linux云计算机构-防盗防击防破解三大工具:webshell、ddos-deflate、Medusa
- Apache 防盗链(Apache Anti-Leech)技术的简单实现
- 【无标题】电自2104吕薇202130310206
- 02 汇编语言的函数
- 能提取HTML网页正文的网站,智能提取网页正文新方法
- C++中的随机数函数(
- java并发编程 目录_Java并发编程实战的作品目录
- Ubuntu16.04+kinetic+cartographer创建三维地图与二维地图
- 7 张简单图片帮你弄懂企业级架构