【HTML5：第九章盒模型相关样式】案例-表格

却尘 · 发表于 2022-1-12 10:59:34

<!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>
         
         <tr>
            
            <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>

		自动登录	找回密码
密码			立即注册

【HTML5：第九章 盒模型相关样式】案例-表格

【HTML5：第九章盒模型相关样式】案例-表格