HTML文档基本结构

最新推荐文章于 2024-09-05 22:55:24 发布

Ambition07518

最新推荐文章于 2024-09-05 22:55:24 发布

阅读量707

点赞数 2

分类专栏： html html基础文章标签： html

本文链接：https://blog.csdn.net/m0_64487895/article/details/127590641

版权

html基础同时被 2 个专栏收录

3 篇文章 2 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

表格的基本结构

1.<table>

<table>...</table>标签用于在HTML中创建表格，它包含表名和表格本身内容的代码。表格里面包含行，行中包含单元格。

2.<tr>

<tr>...</tr>标签用于在表格中定义行，要嵌套在<table>标签中使用。多个行结合在一起就构成一个表格。表格的每一行都用<tr>标签，并用相应的</tr>标签结束

3.<td>

表格的每一行又有若干表格单元格，用<td>...</td>标签定义。td是”表格数据（table date）“英文缩写。<td>标签定义一个列，嵌套于<tr>标签内。border属性是最常用的属性，该属性指定边框的厚度，如果其值为0，则不显示边框。

4.用于创建表格的其他标签

（1）<caption>标签：用于定义表格的标题。该标签必须紧随<table>标签之后，且每个表格只能定义一个标题。通常将标题置于表格之上的居中位置。

（2）<th>标签：用于定义表格内的表头单元格，其显示文字效果通常采用粗体居中。<th>标签必须嵌套在<tr>标签内。

创建表格

创建表格语法：

<table>

<tr>

<td>单元格</td>

</tr>

</table>

创建表格一般分为3步：

第一步：创建表格标签<table>...</table>

第二步：在表格标签<table>...</table>里创建行标签<tr>...</tr>，可以有多个行。

第三步：在行标签<tr>...</tr>里面创建单元格标签<td></td>，可以有多个单元格。

表格的属性

1.用于设置表格的尺寸和框的属性

语法：<table width="表格宽度" height="表格高度" border="表格边框宽度"></table>

其中表格的高度，宽度可以用像素(px)来表示，也可以用百分比来表示(与浏览器窗口相比的大小比例）。表格边框宽度只能用像素来表示。

2.设置表格背景属性

（1）整个表格背景属性

表格背景包括表格表格的背景颜色和背景图像的设置，表格的背景颜色属性bgcolocr是针对整个表格的，表格的背景图像属性background也是针对整个表格的，背景图像会令表格更加美观

（2）表格单行背景

行的bgcolor颜色可以覆盖<table>的bgcolor或background属性。

bgcolor设置表格的背景颜色/background表格的背景属性

（3）单元格背景

单元格的bgcolor颜色可以覆盖行的bgcolor属性

3.设置对齐方式属性

目的：为了美观大方。

设置表格，行或列的对齐公式，修改align属性为right（右对齐），center（居中），left（左对齐），默认为”左对齐“

示例：

<table border="2" width="400" height="150" background=”img/x.jpg“>

<tr bgcolor="red" align="center">

<th>地点</th>

</tr>

</table>

跨多行和多列的表格

1.跨行和跨列表格的概念

有时可能要将多行或多列合并成一个单元格，即可以创建跨多列的行，或创建跨多行的列。colspan属性用于创建跨多列的单元格，rowspan属性用于创建跨多行的单元格。

2.跨多列的表格

跨多列指的是在水平方向上跨多个单元格，通过设置colspan来设置实现的。

3.跨多行的表格

单元格除了可以在水平方向上跨列，还可以在垂直方向上跨行，跨多行的表格是单元格子在垂直方向上跨多行，设置rowspan实现的。

表格的嵌套

嵌套的表格经常用于设计页面布局。

表格的综合示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 表格的综合示例隔行变色</title>
		<style>
		table{
			border:1px solid #0058a3;
			font-family: arial;
			border-collapse:collapse;
			font-size:14px;
		}
		caption{
			padding-bottom:5px;
			font:1.2em;
			font-weight: bold;
			background-color: #c7e5ff;
		}
		td{
			border:1px solid #0058a3;
			text-align:center;
			padding-top: 4px;
			padding-bottom: 4px;
			padding-right: 10px;
		}
		tr.altrow{background-color: #c7e5ff;
			
		}
		</style>
	</head>
	<body>
		<table>
			<caption>网址导航</caption>
			<tr><td>百 度</td><td>新 浪</td><td>腾 讯</td><td>搜 狐</td><td>网 易</td><td>谷 歌</td></tr>
			<tr class="altrow"><td>凤凰网</td><td>央视网</td><td>新华网</td><td>人民网</td>
				<td>中国移动</td><td>中国政府网</td></tr>
				<tr><td>人人网</td><td>开心网</td><td>新浪微博</td><td>汽车之家</td>
				<td>4399游戏</td><td>太平洋电脑网</td></tr>
				<tr class="altrow"><td>东方财富</td><td>中华英才网</td><td>中彩网</td>
					<td>赛尔号</td><td>智联招聘</td><td>携程旅行网</td></tr>
					<tr><td>QQ空间</td><td>赶集网</td><td>百姓网</td><td>淘宝网</td>
					<td>搜房网</td><td>大众点评网</td></tr>
					<tr class="altrow"><td>工商银行</td><td>当当网</td><td>中关村在线</td>
					<td>苏宁易购</td><td>易车网</td><td>去哪儿网</td></tr>
		</table>
	</body>
</html>

运行结果