表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="solid" width="500px" height="150px" cellspacing="0" cellpadding="10" frame="solid" rules="solid" >
<thead>
<caption>课程表</caption>
<tr align="center" valign="center" bgcolor="pink">
<th>星期一</th>
<th>星期二</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody align="center" valign="center">
<tr >
<td rowspan="2">语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td colspan="4">课间活动</td>
</tr>
</tbody>
<tfoot align="center" valign="center">
<tr>
<td>语文</td>
<td>数学</td>
<td >英语</td>
<td>生物</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
</tfoot>
</table>
</body>
</html>
展示效果：
cellspacing 属性规定单元格之间的空间。
请勿将该属性与 cellpadding 属性相混淆，cellpadding 属性规定的是单元边沿与单元内容之间的空间。
valign="center"规定竖直居中
rowspan="2"占据并合并两个单元格
| 星期一 | 星期二 | 星期四 | 星期五 |
|---|---|---|---|
| 语文 | 数学 | 英语 | 生物 |
| 数学 | 英语 | 生物 | |
| 课间活动 | |||
| 语文 | 数学 | 英语 | 生物 |
| 语文 | 数学 | 英语 | 生物 |
表格嵌套
<!DOCTYPE html>
<html>
<head>
<title>表格属性</title>
<meta charset="utf-8">
</head>
<body>
<!-- 在以下表格标签中添加相应代码 -->
<table border="1" width="500" cellspacing="0" cellpadding="5px" align="center">
<caption>课程表</caption>
<tr bgcolor="orange" align="center">
<th>星期一</th>
<th>星期二</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr align="center">
<td rowspan ="2">语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr align="center">
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr align="center">
<td colspan="4">课间活动</td>
</tr>
<tr align="center">
<td rowspan="2" >
<table border="1" cellspacing="0" cellpadding="5px" align="center">
<tr>
<td>前半节</td>
<td>后半节</td>
</tr>
<tr>
<td>诗词</td>
<td>古文</td>
</tr>
</table>
</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr align="center">
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
</table>
</body>
</html>
展示效果：在td中添加表格
| 星期一 | 星期二 | 星期四 | 星期五 | ||||
|---|---|---|---|---|---|---|---|
| 语文 | 数学 | 英语 | 生物 | ||||
| 数学 | 英语 | 生物 | |||||
| 课间活动 | |||||||
| 数学 | 英语 | 生物 | ||||
| 数学 | 英语 | 生物 | |||||
表格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局</title>
</head>
<body>
<table width="100%" height="100%" bgcolor="#f2f2f2">
<tr bgcolor="#14191e" height="60px"> <!-- 页头 -->
<td></td>
</tr>
<tr height="15px"> <!-- 空隙 -->
<td></td>
</tr>
<tr > <!-- 主内容 -->
<td>
<table width="1024px" align="center" >
<tr>
<td width="400px" valign="top" align="right">
<table bgcolor="#fff" width="100%">
<tr>
<td align="center" height="60px">html简介</td>
</tr>
<tr>
<td align="center" height="60px">html表格</td>
</tr>
<tr>
<td align="center" height="60px">html实例</td>
</tr>
<tr>
<td align="center" height="60px">css简介</td>
</tr>
<tr>
<td align="center" height="60px">css表格</td>
</tr>
<tr>
<td align="center" height="60px">css实例</td>
</tr>
<tr>
<td align="center" height="60px">JavaScript简介</td>
</tr>
<tr>
<td align="center" height="60px">JavaScript实例</td>
</tr>
<tr>
<td align="center" height="60px">关于我们</td>
</tr>
</table>
</td>
<td width="24px"></td> <!-- 空隙 -->
<td width="600px" bgcolor="#fff">
<pre>
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
我的第一个标题
我的第一个段落。
例子解释
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
我的第一个标题
我的第一个段落。
例子解释
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
</pre>
</td>
</tr>
</table>
</td>
</tr>
<tr height="20px"> <!-- 空隙 -->
<td></td>
</tr>
<tr bgcolor="#14191e" height="100px"><!-- 页尾 -->
<td></td>
</tr>
</table>
</body>
</html>
展示效果：
| ||||||||||||
更多推荐
HTML——表格、表格嵌套、表格布局
发布评论