内嵌标签: thead (可选)、 tbody (可选)、td、tr、colgroup 、 caption (可选)
属性:align ,bgcolor ,bordercolor,border ,cellpadding ,cellspacing ,frame ,width ,summary ,rules 。
现在的table的属性基本已经过时,都使用css进行设置table样式。
1.border-collapsecollapse | separate
collapse : border线合并
separate: border线分隔,默认属性
ps: 使用collapse 此属性时, border-spacing 、empty-cells和 border-radius 失效 ,无任何效果。
2.border-spacinghorizontal <length >| vertical <length >
3.vertical-align 设置内容与图片位置
4.table-layout auto | fixed
ps: auto 表格布局自适应宽度
fixed 表格布局固定宽度,文字内容等可能会溢出
5.caption-side 针对于caption标签的css样式设置
6.empty-cells 但单元格内无内容时候,可设置隐藏
参考:
https://www.sitepoint.com/community/t/table-format-using-css-border-issue/36882/3
https://css-tricks.com/almanac/properties/b/border-collapse/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Table
一行文字垂直居中:利用line-height来设置
多行文字垂直居中:利用display:table-cell来设置。
代码以及效果:
图片垂直居中:使用绝对定位和transform
代码以及效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#box {
width: 300px
height: 300px
background: #ddd
position: relative
}
#child {
background: #93BC49
position: absolute
top: 50%
transform: translate(0, -50%)
}
</style>
</head>
<body>
<div id="child">
<img alt="" src="img/u=2639088341,2223755776&fm=27&gp=0.jpg" style="display: inline-blockvertical-align: middle" />
</div>
</body>
</html>
<div></div>垂直居中:
代码与效果:
<head>
<meta charset="utf-8" />
<title></title>
<style>
.zz {
position: absolute
top: 50%
width: 200px
height: 100px
margin-top: -50px
}
</style>
</head>
<body>
<div class="zz">
<span>测试垂直居中</span>
</div>
</body>
<div><div></div></div>里的div垂直居中:
代码与效果:
<head>
<meta charset="utf-8" />
<title></title>
<style>
.root-div{
/*注意,外容器需要指定一个height:*/
height: 700px
}
.children-div{
position: relative
top: 50%
-webkit-transform: translateY(-50%)
-webkit-transform: translateY(-50%)
transform: translateY(-50%)
}
</style>
</head>
<body>
<div class="root-div">
<div class="children-div">Hello</div>
</div>
</body>