HTML入门教程之表格标志

表格标志

1.<table></table>

2.<tr></tr><td></td>

3.<th></th>

表格标志对于制作网页是很重要的，我希望您能记住这一点，现在很多很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意的进行背景和前景颜色的设置。但愿您也能熟练使用表格来制作您的主页。

1.<table></table>

<table></table>标志对用来创建一个表格。它有以下属性：

属性

用途

<table bgcolor=""> 设置表格的背景色。

<table border=""> 设置边框的宽度，若不设置此属性，则边框宽度默认为0。

<table bordercolor=""> 设置边框的颜色。

<table bordercolorlight=""> 设置边框明亮部分的颜色(当border的值大于等于1时才有用)。

<table bordercolordark=""> 设置边框昏暗部分的颜色(当border的值大于等于1时才有用)。

<table cellspacing=""> 设置表格格子之间空间的大小。

<table cellpadding=""> 设置表格格子边框与其内部内容之间空间的大小。

<table width=""> 设置表格的宽度，单位用绝对像素值或总宽度的百分比。

说明:以上各个属性可以结合使用。有关宽度、大小的单位用绝对像素值。而有关颜色的属性使用十六进制RGB颜色码或Html语言给定的颜色常量名(如 Silver 为银色)

2.<tr></tr><td></td>

<tr></tr>标志对用来创建表格中的每一行。此标志对只能放在<table></table>标志对之间使用，而在此标志对之间加入文本将是无用的，因为在<tr></tr>之间只能紧跟<td></td>标志对才是有效的语法，<td></td>标志对用来创建表格中一行中的每一个格子，此标志对也只有放在<tr></tr>标志对之间才是有效的，您想要输入的文本也只有放在<td></td>标志对中才有效(即才能够显示出来)。<table></table>、<tr></tr>和<td></td>标志对的关系如下所示：

最外层,创建一个表格--> <table>

创建一行--> 　 <tr>

创建一个格子(这里总共创建了三个格子)--> 　　 <td>要输出的文本只能放在此处</td>

<td>要输出的文本只能放在此处</td>

</tr>

最外层--> </table>

此外，<tr>还有align和valign属性。align是水平对齐方式，取值为left(左对齐)、center(居中)、right(右对齐)；而valign是垂直对齐方式，取值为top(*顶端对齐)、middle(居中间对齐)或bottom(*底部对齐)。<td>具有width、colspan、rowspan和nowrap属性。width是格子的宽度，单位用绝对像素值或总宽度的百分比；colspan设置一个表格格子跨占的列数(缺省值为1)；rowspan设置一个表格格子跨占的行数(缺省值为1)；nowrap禁止表格格子内的内容自动断行。

3.<th></th>

<th></th>标志对用来设置表格头，通常是黑体居中文字。

看一看下边的例子就明白以上标志对的用法了。

例6 表格标志的综合示例

<html>

<head>

<title>表格标志的综合示例</title>

</head>

<body>

<table border="1" width="80%" bgcolor="#E8E8E8" cellpadding="2" bordercolor="#0000FF"

bordercolorlight="#7D7DFF" bordercolordark="#0000A0">

<tr>

</tr>

<tr>

</tr>

<tr>

<td width="16%" align="center">桑普多利亚</td>

<td width="17%" align="center">皇家马德里</td>

</tr>

<tr>

<td width="17%" align="center">米德尔斯堡</td>

<td width="17%" align="center">马德里竞技</td>

</tr>

</table>

</body>

</html>

本例在浏览器中显示的结果如下：

意大利英格兰西班牙

AC米兰佛罗伦萨曼联纽卡斯尔巴塞罗那皇家社会

尤文图斯桑普多利亚利物浦阿申纳皇家马德里 ……

拉齐奥国际米兰切尔西米德尔斯堡马德里竞技 ……

品略图书馆 http://www.pinlue.com/

HTML入门教程之表格标志相关推荐

零基础HTML入门教程(14)——表格
本章目录 1.任务目标 2.表格介绍 3.表格的标签 4.代码演示 5.小结 1.任务目标我们生活处处离不开表格,我们比如说,成绩单,菜单,等.都是用表格做出来的,表格在我们生活中是必不可少的,生活 ...
电脑表格制作教程入门_第三节 CorelDRAW制作作品的流程 - CorelDRAW基础入门教程 - 平面设计学院...
CorelDraw简称CDR,是加拿大Corel软件公司产品.它是一个绘图与排版的软件,它广泛地应用于商标设计.标志制作.模型绘制.插图描画.排版及分色输出等诸多领域.作为一个强大的绘图软件,自然广受 ...
Android基础入门教程——2.2.3 TableLayout(表格布局)
Android基础入门教程--2.2.3 TableLayout(表格布局) 标签(空格分隔): Android基础入门教程本节引言: 前面我们已经学习了平时实际开发中用得较多的线性布局(Linea ...
MFC 最详细入门教程
From:https://blog.csdn.net/wang18323834864/article/details/78621633/ Visual Studio 2019:https://visu ...
TZC Python编程入门教程 ————题解
本博客原文地址:Python编程入门教程(以在线评测平台为载体) - 暴力都不会的蒟蒻 - 博客园,原文体验更佳如果你是一名浙江2020级及以后的高中生要学习Python,抑或是一位科学工作者要学习 ...
TypeScript超详细入门教程（上）
TypeScript超详细入门教程(上) 01 开篇词:Hello~TypeScript 01 开篇词:Hello~TypeScript 更新时间:2019-10-30 13:49:46 既然我已经踏 ...
C#，入门教程(04)——Visual Studio 2022 数据编程实例：随机数与组合
上一篇: C#,入门教程(03)--Visual Studio 2022编写彩色Hello World与动画效果https://blog.csdn.net/beijinghorn/article/de ...
html+php教程,HTML入门教程
1.HTML简介 HTML(Hypertext Markup Language)即超文本标记语言,是用于描述网页文档的一种标记语言. HTML 标记标签通常被称为 HTML 标签 (HTML tag) ...
ArcGIS Runtime SDK for Windows Phone 入门教程
ArcGIS Runtime SDK for Windows Phone 入门教程基本概念 Windows Phone平台介绍 Windows Phone是微软发布的一款手机操作系统,它将微软旗下的 ...

HTML入门教程之表格标志

HTML入门教程之表格标志相关推荐

最新文章

热门文章