CSS之表格

最新推荐文章于 2024-05-14 16:52:58 发布

Lucky-肥仔

最新推荐文章于 2024-05-14 16:52:58 发布

阅读量1.3k

点赞数 1

分类专栏：前端

坚持写博客

本文链接：https://blog.csdn.net/lifen0908/article/details/46682981

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先，DIV+CSS是web设计标准，他是一种网页的布局方法，他可以实现内容和表现相分离。

现在我们来说说css的表格属性。

格式：

<table width="" bgcolor="" background="" border="" cellspacing="" cellpadding="">
<tr>...<td>....</td>....</tr>
</table>
border边框宽度默认值为0，既没有边框
cellspacing表格中单元格的边距大小，默认值为两个像素
cellpadding表格中单元格之间的间距大小，默认值为两个像素

语法知识：

<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

例子：

<html>
<head>
<title>个人主页</title>
<style>
<!--
body{
	background:url(bg9.gif);	/* 页面背景图片 */
	margin:0px; padding:0px;
}
.chara1{
	font-size:12px;
	background-color:#90bcff;	/* 导航条的背景颜色 */
}
.chara1 td{
	text-align:center;
}
.chara2{
	background-color:#d2e7ff;
	text-align:center;
	font-size:12px;
	vertical-align:top;
}
.chara3{
	/* 主题部分的背景图片 */
	background:#e9fbff url(self.jpg) no-repeat bottom right;
	vertical-align:top;
	padding-top:15px; padding-left:30px;
	font-size:12px; padding-right:15px;
}
.pic1{
	border:1px solid #00406c;
}
p.leftcontent{
	padding-left:15px;
	padding-right:10px;
	text-align:left;
	color:#001671;
}
h4{
	text-decoration:underline;
	color:#0078aa;
	padding-top:15px;
}
-->
</style>
   </head>
<body> 
<table align="center" cellpadding="1" cellspacing="0">
	<tr><td><img src="banner3.jpg" border="0"></td></tr>
</table>
<table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center">
	<tr><td>首页</td><td>心情日记</td><td>Free</td><td>一起走到</td><td>从明天起</td><td>纸飞机</td><td>下一站</td></tr>
</table>
<table width="600px" align="center" cellpadding="0" cellspacing="1">
	<tr>
		<td width="150px" class="chara2">
			<br>
			<p><img src="selfpic.jpg" class="pic1">
			<br>我的日记本</p>
			<p class="leftcontent">他们彼此深信，是瞬间迸发的热情让他们相遇。这样的确定是美丽的，但变幻无常更为美丽。</p>
			<p><img src="selfpic2.jpg" class="pic1">
			<br>心情轨迹</p>
			<p class="leftcontent">董事长的一切都让人既羡慕又忌妒，但更让人受不了的是，有一天，上苍忽然赐给他一个神奇的礼物………</p>
		</td>
		<td class="chara3">
			<h4>介绍</h4>
			<p>我努力的抓紧世界，最后却仍被世界淘汰，如果一开始就松手，我会不那么伤心吗？你说，亲爱的孩子，世事难料，随它去吧！</p>
			<h4>照相本子</h4>
			<p>关于童年，你记住了什么？ <br>
			两岁时，我拥有一只巨大的粉红猪，它总在我嚎啕大哭时逗我笑。<br>
			三岁时，我骑着小木马一路摇到外婆家，它不喝水也不吃草。<br>
			四岁时，我离家出走，在公车上睡着了，最后是太空超人送我回家。<br>
			我真的没骗你，我通通都记得，还有照片为证。
			</p>
			<h4>地下铁</h4>
			<p>天使在地下铁的入口，<br>
			和我说再见的那一年，<br>
			我渐渐看不见了。<br>
			十五岁生日的那年秋天早晨，<br>
			窗外下着毛毛雨，<br>
			我喂好我的猫。<br>
			六点零五分，<br>
			我走进地下铁。</p>
			<h4>向左走向右走</h4>
			<p>They're both convinced<br>
			that a sudden passion joined them.<br>
			Such certainth is beautiful,<br>
			but uncertainty is more beautiful still.</p>
			<br>
		</td>
	</tr>
</table>
</body>
</html>