持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
目录（10、表格-常用属性：th、align、valign）
一、前言
上一篇文章我整理以前的知识是：表格-常用属性：border、width、height，详细可参考博文 [web快速入门之基础篇-html：9、表格-常用属性：border、width、height] 这篇文章我将整理知识：表格-常用属性：th、align、valign
二、实例演示
实例代码
我们先来看看一个例子，如下代码：03_th、align、valign.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>这是title标题</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h3>---(1)th表头单元格，定义表头内容、td标准单元格，定义常见普通内容---</h3>
<table border="1" width="300" height="250">
<tr>
<th>字母_th</th>
<th>数字_th</th>
</tr>
<tr>
<td>a_td</td>
<td>123_td</td>
</tr>
<tr>
<td>c_td</td>
<td>456_td</td>
</tr>
</table><br />
<h3>---(2)：align水平布局、valign垂直布局---</h3>
<table border ="1" width="300" height="250">
<tr>
<td >abc</td>
<td align="middle">bac</td>
<td align="right">cba</td>
</tr>
<tr>
<td valign="top">bcd</td>
<td >cdb</td>
<td valign="bottom">dcb</td>
</tr>
</table>
</body>
</html>
效果演示
用谷歌浏览器打开运行，效果如下：
编辑
三、知识点说明
常用属性:th/align/valign
1、th 标签
定义表格内的表头单元格。
HTML 表单中有两种类型的单元格：
表头单元格 - 包含表头信息（由 th 元素创建）
标准单元格 - 包含数据（由 td 元素创建）
th 定义表头内容，元素内部的文本通常会呈现为居中的粗体文本，
td 定义普通内容，元素内的文本通常是左对齐的普通文本。
详见：
www.w3school.com.cn/tags/tag_th…
2、align 和 valign 标签
align：水平布局(默认为左)
valign：垂直布局(默认为中)
目录（11、表格-常用属性：cellspacing、cellpadding）
改变 cellspacing 和 cellpadding 的值
一、前言
上一篇文章我整理以前的知识是：表格-常用属性：th、align、valign，详细可参考博文 【web快速入门之基础篇-html：10、表格-常用属性：th、align、valign】这篇文章我将整理知识：表格-常用属性：cellspacing、cellpadding
二、实例演示
实例代码
我们先来看看一个例子，如下代码：04_cellspacing、cellpadding.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>这是title标题</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h3>---表格：cellspacing(试试：2和20的区别)---</h3>
<table border ="1" width="30" height="25" cellspacing="2">
<tr>
<td >abc</td>
<td >cba</td>
</tr>
<tr>
<td >bcd</td>
<td >dcb</td>
</tr>
</table>
<h3>---表格：cellpadding(试试：5和50的区别)---</h3>
<table border ="1" width="30" height="25" cellpadding="5">
<tr>
<td >abc</td>
<td >cba</td>
</tr>
<tr>
<td >bcd</td>
<td >dcb</td>
</tr>
</table>
</body>
</html>
效果演示
用谷歌浏览器打开运行，效果如下：
编辑
改变 cellspacing 和 cellpadding 的值
我们把 cellspacing 的值由 “2”改为“20”，cellpadding 的值由 “5”改为“50”，效果如下：
编辑
我们对比上面的两张个效果图，效果非常明显！
cellspacing：单元格之间以及单元格和外边框之间的距离
cellpadding：单元格的内边距
caption 标签
我们先来看看一个例子，如下代码：05_caption.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>这是title标题</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h3>---caption标签---</h3>
<table border="1" width="100" height="50">
<caption>表格1</caption>
<tr>
<td>abc</td>
<td>cba</td>
</tr>
</table>
</body>
</html
运行效果如下：
编辑
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。
您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
详见：
www.w3school.com.cn/tags/tag_ca…
行分组thead/tbody/tfoot(很少使用，就没研究了)
标签定义表格的表头。thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
注意：
内部必须拥有 标签！ 、 以及 很少被使用，这是因为糟糕的浏览器支持详见：
www.w3school.com.cn/tags/tag_th…
