web快速入门之基础篇-html:11、表格-常用属性:cellspacing、cellpadding、caption、thead等

目录

一、前言

二、实例演示

实例代码

效果演示

改变 cellspacing 和 cellpadding 的值

caption 标签


一、前言

上一篇文章我整理以前的笔记是:表格-常用属性: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 标签之后。

您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

详见:

http://www.w3school.com.cn/tags/tag_caption.asp

行分组thead/tbody/tfoot(**很少使用,就没研究了**)

<thead> 标签定义表格的表头。

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

注意:

<thead> 内部必须拥有 <tr> 标签!

<thead>、<tbody> 以及 <tfoot> 很少被使用,这是因为糟糕的浏览器支持

详见:

http://www.w3school.com.cn/tags/tag_thead.asp

发布了284 篇原创文章 · 获赞 46 · 访问量 12万+

猜你喜欢

转载自blog.csdn.net/YuDBL/article/details/104099473
今日推荐