CSS表格显示如何工作

最新推荐文章于 2025-04-30 20:17:23 发布

xvzhengyang

最新推荐文章于 2025-04-30 20:17:23 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 css 文章标签： CSS表格显示

本文链接：https://blog.youkuaiyun.com/xvzhengyang/article/details/86438861

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

css

47 篇文章

订阅专栏

首先来看效果图 header content ad footer

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS表格显示如何工作</title>
		<!-- CSS表格显示允许你在一个有行和列的表格中显示块元素,另外通过将内容放在一个CSS表格中,可以很容易的
		 用HTML和CSS创建多栏设计-->
		<!-- 表格包括行和列,各行和各列交叉的位置有一个单元格;每个单元格会包括一个HTML块元素
		 记住是块元素,如果药房内联元素,需要外层放一个div
		  -->
		<!-- 如何使用CSS创建表格显示
		   1.首先为表格增加一个div,id为tablecontainer.这个div包含行和列.
		   div#tablecontainer{
			   display : table;
		   }
		   2.接下来,为行增加一个div,id为tableRow.有几行就添加几个div,本例只有一行,其中有两个单元格.
		   div#tableRow{
			   display: table-row;
		   }
		   3.最后就是列了,也就是单元格了.对各行中的各列,样式如下
		   #div{
			   display:table-cell
		   }
		   下面我们来看例子
			 注意:  1.css中的display为table与HTML表格类似,但是css表格显示只是创建某种表现布局的一种方法;而HTML表格则是建立数据的结构
		          2.
		   -->
		<style type="text/css">
			html,
			body {
				margin: 0;
				padding: 0;
				height: 100%;
			}

			div {
				height: 100%;
			}

			#allcontent {
				width: 800px;
				height: 500px;
				padding-top: 5px;
				padding-bottom: 5px;
				margin-left: auto;
				margin-right: auto;
			}

			#first {
				background-color: #76FF03;
				height: 100px;
			}

			#content {
				background-color: red;
				height: 300px;
				display: table-cell;
				width: 40%;
			}

			#ad {
				background-color: blue;
				height: 300px;
				width: 40%;
				display: table-cell;
			}

			#adTwo {
				background-color: magenta;
				width: 20%;
				display: table-cell;
				vertical-align: top;
			}

			#footer {
				background-color: #FFC0CB;
				height: 100px;
			}

			#tablecontainer {
				display: table;
				/* table属性告诉 tablecontainer div要像一个表格一样摆放 */
				border-spacing: 10px;
				/* 属性为表格中的单元格增加10像素的边框间距.可以把border-spacing看作是常规元素的外边据 */
				width: 100%;
			}

			#tableRow {
				display: table-row;
				width: 100%;
			}

			#tableCell {
				display: table-cell;
			}
		</style>
	</head>
	<body>
		<div id="allcontent">
			<div style="background-color: #00FFFF;">
				<!-- 页眉 -->
				<div id="first">
					我是页眉
				</div>
				<!-- 放到表格中 -->
				<div id="tablecontainer">
					<!-- 放到行中 -->
					<div id="tableRow">
						<div id="adTwo">
							我是左侧
						</div>
						<!-- 主内容 -->
						<div id="content">
							我是内容

						</div>
						<!-- 广告区 -->
						<div id="ad">
							我是广告1
						</div>
					</div>
				</div>
				<!-- 页脚 -->
				<div id="footer">
					我是页脚我是页脚我是页脚我是页脚我是页脚我是页脚
					我是页脚我是页脚我是页脚我是页脚我是页脚我是页脚

				</div>
			</div>
		</div>
	</body>
</html>