教育改变生活
标题:
【HTML5:第九章 盒模型相关样式】案例-表格
[打印本页]
作者:
却尘
时间:
2022-1-12 10:59
标题:
【HTML5:第九章 盒模型相关样式】案例-表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格的样式</title>
<style type="text/css">
table{
/*设置表格的宽度*/
width: 300px;
/*设置居中*/
margin: 0 auto;
/*设置边框*/
/*border: 1px solid black;*/
/**
* table的td之间默认有一个距离,通过border-spacing属性可以设置这个像素
*/
/*border-spacing: 0px;*/
/**
* border-collapse可以用来设置表格的边框合并,如果设置了该属性,border-spacing会自动失效
*/
border-collapse: collapse;
}
/**
* 伪类nth-child的even参数可以选中偶数行,而odd则可以选中奇数行。
*
* 温馨提示:
* nth-child属性IE8及以下版本并不支持,若非要达到相同的效果则需要引入JS来搞事情。
*/
tr:nth-child(even){
background-color: yellow;
}
/**
* 当鼠标移入到tr标签后,会改变颜色
*/
tr:hover{
background-color: deeppink;
}
/*为td标签设置样式*/
td,th{
/*设置边框*/
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<!--
table是块元素
-->
<tr>
<!--
可以使用th标签来表示表头的内容,它的用法和td一样,不同的是他会有一些默认效果(居中,加粗)
-->
<th>学号</th>
<th>姓名</td>
<th>性别</td>
<th>住址</td>
</tr>
<tr>
<td>1</td>
<td>唐三藏</td>
<td>男</td>
<td>东土大唐</td>
</tr>
<tr>
<td>2</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山水帘洞</td>
</tr>
<tr>
<td>3</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>4</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>5</td>
<td>白龙马</td>
<td>男</td>
<td>东海龙宫</td>
</tr>
<tr>
<td>6</td>
<td>哪吒</td>
<td>男</td>
<td>陈唐关</td>
</tr>
<tr>
<td>7</td>
<td>如来佛祖</td>
<td>男</td>
<td>西方极乐</td>
</tr>
<tr>
<td>8</td>
<td>牛魔王</td>
<td>男</td>
<td>铁扇公主洞府</td>
</tr>
<tr>
<td>9</td>
<td>太白金星</td>
<td>男</td>
<td>太白金星府</td>
</tr>
<tr>
<td>10</td>
<td>女儿国女王</td>
<td>女</td>
<td>女儿国</td>
</tr>
<tr>
<td>11</td>
<td>观音大师</td>
<td>男</td>
<td>南海</td>
</tr>
<tr>
<td>12</td>
<td>红孩儿</td>
<td>男</td>
<td>红孩儿洞府</td>
</tr>
</table>
</body>
</html>
欢迎光临 教育改变生活 (http://bbs.goldoar.com/)
Powered by Discuz! X3.2