CSS-表格属性

最新推荐文章于 2024-04-20 18:15:46 发布

老王笔记

最新推荐文章于 2024-04-20 18:15:46 发布

阅读量1.3k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/JSWANGCHANG/article/details/100829767

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1，表格常用属性
   1，尺寸属性
   2，边框属性
   3，文本格式化
   4，背景属性
   5，框模型属性
       margin不能用在td上的
2，表格特有属性
   1，边框的合并
       属性：border-collapse
       取值：
           1， separate
               默认值，分离边框（双线边框）模式
           2，collapse：
               边框合并
   2，边框边距
       作用：设置每两个单元格间的距离
       属性： border-spacing
       取值：
           1， value 指定一个数值；
               水平和垂直距离相等；
           2， value value
               第一个value：水平间距
               第二个value: 垂直间距
               border-spacing: 1px 3px;
       注意：如果要使用border-spacing，则border-collapse值必须为separate;
练习：
   根据样例制作表格

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
	/* 设置表格属性， 表bottom实现边框 ,设置行高*/
	#tb1{
		border-collapse:separate;
		border-spacing: 1px 1px;
		line-height:2;
		font-size: 12px;
		text-align:center;
		border-bottom:1px solid #000;
		width:990px;
	}
	
	/* 设置第一行 样式，加粗，颜色透明度 */
	#th1 td{
			border-bottom:1px solid #666;
			font-weight:bold;
			padding-bottom:5px;
		}
	/* 设置第二至第四行样式 */
	#tbody1 td{
			border-bottom:1px dashed #9c9a9c;
		}


	/* 设置每一列的宽度 */
	#td1{
		width:610px;	
		text-align:left;
		}

	/*所有的超链接取消下划线*/
	a{
		text-decoration:none;
		color:#005aa0;
	{
  </style>
 </head>
 <body>	
	<div id="d1">
		<!--样例表格5行4列-->
		<table	id="tb1">
			<thead id="th1">
				<tr>
					<td id="td1">主题</td>
					<td id="td2">回复/浏览</td>
					<td id="td3">作者</td>
					<td id="td4">时间</td>
				</tr>
			</thead>
			<tbody id="tbody1">
				<tr>
					<td  id="td1"><a href="#">&nbsp;救亡图存</a></td>
					<td>0/0</td>
					<td><a href="#">我吃西红柿</a></td>
					<td>2019-09-14</td>
				</tr>
				<tr>
					<td id="td1"><a href="#">&nbsp;七龙珠</a></td>
					<td>1/0</td>
					<td><a href="#">蟹黄</a></td>
					<td>2019-08-14</td>
				</tr>
				<tr>
					<td id="td1"><a href="#">&nbsp;东皇太一</a></td>
					<td>0/0</td>
					<td><a href="#">曹雪芹</a></td>
					<td>2019-07-14</td>
				</tr>
				<tr>
					<td id="td1"><a href="#">&nbsp;屠龙刀</a></td>
					<td>0/0</td>
					<td><a href="#">刘洪一</a></td>
					<td>2019-01-14</td>
				</tr>
			</tbody>
		</table>
	</div>
 </body>
</html>

效果

老王笔记

关注

1
点赞
踩
8

收藏

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

1，表格常用属性 1，尺寸属性 2，边框属性 3，文本格式化 4，背景属性 5，框模型属性 margin不能用在td上的2，表格特有属性 1，边框的合并属性：border-collapse 取值： 1， separate 默认值，分离边框（双线...
复制链接

扫一扫