表格的属性

最新推荐文章于 2022-04-23 08:52:02 发布

真是敞亮

最新推荐文章于 2022-04-23 08:52:02 发布

阅读量1.1k

点赞数

分类专栏： css3 文章标签： table

本文链接：https://blog.csdn.net/weixin_45743297/article/details/102613167

版权

css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

表格的常用属性

table 尺寸、边框、背景、字体、文本、内外边距都可以用
td/th 外边距无效，常规属性都可以用

table的特性
1. table的尺寸当内容少时，执行table设置的尺寸当内容多时，靠内容撑开
2. table的渲染方式先读到内存中，然后一次性渲染

 3. *当数字字母连着写没有空格，html认为他是一个完整的单词，不换行。中间有空格，HTML认为，他是多个单词，一行显示不下就换行，一个中文被判定为一个单词*

表格

table

边框合并

border-callapse:
			取值：separate  默认值，分离状态
						callapse 合并

这是border-callapse的值为callpapse时的效果

这是border-callapse的值为separate时的效果

table{
		width:200px;height:200px;
		background-color:#008783;
		border:2px solid #c1694f;
		font-size:16px;font-family:jokerman;
		padding:20px;
		margin:30px;
	/*边框合并*/
		border-collapse:separate;
/*	border-collapse:collapse;*/
		border-spacing:5px 10px;
		caption-side:top;
	}
	table tr{
		vertical-align:middle;
	}
	table td{
		border:2px solid #000080;
		background-color:#7fff00;
		font:12px "mv boli";
		text-align:right;
		margin:20px;padding:2px;
    
	}

边框边距

border-sapcing：
					取一个值，同时设置x，y轴的间距
					取两个值，分别设置x,y轴的间距

前提：表格的border-callapse必须是separate状态

标题位置

caption-side:top/ bottom;

这个属性用的很少。

设置表格的显示规则

table-layout：
					取值：1. auto 默认值，自动布置表格
							列的大小由实际内容决定，内容大，列就大，内容小，列按照设置的尺寸为准
								
								2.fixed 固定表格布局
										列的尺寸永远按照设置的尺寸为准

tr/th/td

vertical-align:middle;
				取值：top/ bottom /middle

这节课的作业

写出以下效果图
课后作业

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	table{
	width:900px;
	border-bottom:1px solid #ddd;
	margin:0 auto;
	font-size:12px;
	text-align:center;
	color:#666;
	}
	a{
	text-decoration:none;
	color:#005aa0;
	}
	table tr th{
	border-bottom:1px solid #000;
	color:#000;
	}
	table tr td{
	border-bottom:1px dotted #dedede;
	}
	table .title{
	width:550px;
	text-align:left;
	padding:5px;
	}
	</style>
</head>
<body>
	    <img src="课后作业.png" alt="">
	<table>
		<tr>
			<th class="title">主题</th>
			<th>回复/浏览</th>
			<th>作者</th>
			<th>时间</th>
		</tr>
		<tr>
			<td class="title"><a href="">银灰色，很酷</a></td>
			<td>0/0</td>
			<td><a href="">2010年冬天</a></td>
			<td>2019年10月16日14:28:51</td>
		</tr>
		<tr>
			<td class="title"><a href="">银灰色，很酷</a></td>
			<td>0/0</td>
			<td><a href="">2010年冬天</a></td>
			<td>2019年10月16日14:28:51</td>
		</tr>
		<tr>
			<td class="title"><a href="">银灰色，很酷</a></td>
			<td>0/0</td>
			<td><a href="">2010年冬天</a></td>
			<td>2019年10月16日14:28:51</td>		</tr>
		<tr>
			<td class="title"><a href="">银灰色，很酷</a></td>
			<td>0/0</td>
			<td><a href="">2010年冬天</a></td>
			<td>2019年10月16日14:28:51</td>		</tr>
	</table>
</body>
</html>

真是敞亮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表格的属性

表格的常用属性table 尺寸、边框、背景、字体、文本、内外边距都可以用td/th 外边距无效，常规属性都可以用table的特性 1. table的尺寸当内容少时，执行table设置的尺寸当内容多时，靠内容撑开2. table的渲染方式先读到内存中，然后一次性渲染 3. *当数字字母连着写没有空格，html认为他是一个完整的单词，不换行。中间有空格，HTM...
复制链接

扫一扫