H5学习之20 CSS-table
2016-08-03 21:44
246 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <table id="table1"> <caption>表格标题</caption> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td><td> </td><td> </td> </tr> </table> <hr/> <!--------------------------------------------------------------------------------------------------------------------> <table id="table2"> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> </tr> <tr> <td>444444</td><td>555555</td><td>666666</td> </tr> </table> <hr/> <!--------------------------------------------------------------------------------------------------------------------> <table id="table3"> <caption>漂亮的表格</caption> <tr> <th>漂亮</th> <th>漂亮</th> <th>漂亮</th> </tr> <tr class="alt"> <td>美丽</td> <td>美丽</td> <td>美丽</td> </tr> <tr> <td>动人</td> <td>动人</td> <td>动人</td> </tr> <tr class="alt"> <td>动人</td> <td>动人</td> <td>动人</td> </tr> <tr> <td>动人</td> <td>动人</td> <td>动人</td> </tr> <tr class="alt"> <td>动人</td> <td>动人</td> <td>动人</td> </tr> </table> </body> </html>
#table1 ,#table1 th,#table1 td{
border: 1px solid blue;
border-spacing: 50px;
empty-cells: hide;
caption-side: bottom;
}
/*
三个标签 都有边框
一个table设置了id ，直接#id 就代表了那个table
border spacing 设置分隔单元格边框的距离。如果设置了 collapse:collapse 就失效
empty cells 设置空单元格是否显示，我记得有一个属性可以让 没有内容的单元格也可以显示出边框，需要的话再查
caption side 代表标题位置
*/
/*---------------------------------------------------------------------------------------------------------------------*/
#table2 ,#table2 th,#table2 td{
border: 1px solid blue;
border-collapse: collapse;
}
/*边框出现好几层的时候，border-collapse：collapse 可以让边框变成单层*/
#table2{
width:100%;
/* height:100%;*/
text-align: right;
color: green;
background-color: darkgrey;
}
/*
直接 设置 table的宽度为100%，可以让表格宽度填满屏幕，设置高度百分比不管用,高度具体数值可以更改
text align 设置水平对齐方式，th默认是居中，设置成right就到右边了。
color直接更改文字颜色
background-color 更改背景颜色
*/
#table2 th{
height:100px ;
/* widht:100px;*/
vertical-align: top;
color: blue;
}
/*
设置th的高度可以更改高度,在这里更改宽度不管用
vertical-align 设置垂直对其方式，th默认居中，设置成top就到了上头。
*/
#table2 td{
height:25px;
padding:10px;
}
/*
padding 更改内边距的值，
控制表格中内容与边框的距离
*/
/*---------------------------------------------------------------------------------------------------------------------*/
#table3,#table3 th,#table3 td{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;;
caption-side: bottom;
border: green solid 1px;
border-collapse: collapse;
}
#table3{
width:100%;
}
#table3 th{
background-color: darkgreen;
color: white;
font-size: 1.2em;
text-align: left;
padding: 5px 0px 5px 4px;
}
/*内边距padding值， 4个值分别为上右下左，只设置1个值就是4个值全是，如果2 3 4 个 就按 上右下左的顺序*/
#table3 td{
font-size: 0.9em;
padding: 4px;
}
#table3 tr.alt {
color: blue;
background-color: #EAF2D3;
}
/*给tr设置了一下类，然后设置了一下背景颜色*/具体效果如下：
代码解释如下：
一共三个表格，
第一个表格
<table id="table1"> <caption>表格标题</caption> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td><td> </td><td> </td> </tr> </table>
#table1 ,#table1 th,#table1 td{
border: 1px solid blue;
border-spacing: 50px;
empty-cells: hide;
caption-side: bottom;
}
/*
三个标签 都有边框
一个table设置了id ，直接#id 就代表了那个table
border spacing 设置分隔单元格边框的距离。如果设置了 collapse:collapse 就失效
empty cells 设置空单元格是否显示，我记得有一个属性可以让 没有内容的单元格也可以显示出边框，需要的话再查
caption side 代表标题位置
*/三个标签都有边框，指的是 table th td 都设置了border.
稍微注意一下选择的时候的格式
第二个表格
<table id="table2"> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> </tr> <tr> <td>444444</td><td>555555</td><td>666666</td> </tr> </table>
#table2 ,#table2 th,#table2 td{
border: 1px solid blue;
border-collapse: collapse;
}
/*边框出现好几层的时候，border-collapse：collapse 可以让边框变成单层*/
#table2{
width:100%;
/* height:100%;*/
text-align: right;
color: green;
background-color: darkgrey;
}
/*
直接 设置 table的宽度为100%，可以让表格宽度填满屏幕，设置高度百分比不管用,高度具体数值可以更改
text align 设置水平对齐方式，th默认是居中，设置成right就到右边了。
color直接更改文字颜色
background-color 更改背景颜色
*/
#table2 th{
height:100px ;
/* widht:100px;*/
vertical-align: top;
color: blue;
}
/*
设置th的高度可以更改高度,在这里更改宽度不管用
vertical-align 设置垂直对其方式，th默认居中，设置成top就到了上头。
*/
#table2 td{
height:25px;
padding:10px;
}
/*
padding 更改内边距的值，
控制表格中内容与边框的距离
*/第三个表格
<table id="table3"> <caption>漂亮的表格</caption> <tr> <th>漂亮</th> <th>漂亮</th> <th>漂亮</th> </tr> <tr class="alt"> <td>美丽</td> <td>美丽</td> <td>美丽</td> </tr> <tr> <td>动人</td> <td>动人</td> <td>动人</td> </tr> <tr class="alt"> <td>动人</td> <td>动人</td> <td>动人</td> </tr> <tr> <td>动人</td> <td>动人</td> <td>动人</td> </tr> <tr class="alt"> <td>动人</td> <td>动人</td> <td>动人</td> </tr> </table>
#table3,#table3 th,#table3 td{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;;
caption-side: bottom;
border: green solid 1px;
border-collapse: collapse;
}
#table3{
width:100%;
}
#table3 th{
background-color: darkgreen;
color: white;
font-size: 1.2em;
text-align: left;
padding: 5px 0px 5px 4px;
}
/*内边距padding值， 4个值分别为上右下左，只设置1个值就是4个值全是，
#table3 td{
font-size: 0.9em;
padding: 4px;
}
#table3 tr.alt {
color: blue;
background-color: #EAF2D3;
}
/*给tr设置了一下类，然后设置了一下背景颜色*/复杂的表格就是设置的样式多一点，颜色搭配好一点。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css学习之table
- 8-20学习练习[用两个tableview实现类似省市联动选择效果]
- H5学习之25 CSS 给图片增加框 透明度的设置
- H5学习笔记之CSS代码语法
- H5学习笔记之CSS三大特性
- CSS技巧学习：像table一样布局div
- H5学习笔记——CSS文本设置属性&颜色表示法
- H5学习之21 css-padding-margin-outline
- H5学习之19 css-list
- 【HTML5学习笔记】20：CSS文本样式 下
- 8-20学习练习[用两个tableview实现类似省市联动选择效果]
- h5学习笔记：Table
- css案例学习之table tr th td ul li实现日历
- H5学习之22 CSS-导航栏的创建
- H5学习之16 CSS
- 黑马程序员_学习记录20：HTML,JavaScript,CSS小结
- css案例学习之用thead、tbody、tfoot实现漂亮的table布局
- H5学习小结——div+css创建电子商务静态网页
- h5学习笔记：Table2
- white-space和table-layout实现文本过长但只在一行显示（心酸CSS学习路程一）