zoukankan      html  css  js  c++  java
  • table表格

    先看看代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    tr th
    { background-color:blue;
    color
    :red;
    }
    /*tr:nth-child(odd){ background:red;}
    tr:nth-child(even){background:green;}
    */
    tr td:nth-of-type(2n+1)
    { background:red;}
    tr td:nth-of-type(2n)
    {background:green;}

    </style>
    </head>

    <body>
    <table border="1" bordercolor="lime" cellpadding="30px" cellspacing="5px"> //cellpadding是创建空间在内容和边框中
                                                                                  //cellspacing是增加cell间的距离
    <tr>
    <th>Name</th>
    <th>Id</th>
    <th>score</th>
    </tr>
    <tr>
    <td>suming</td>
    <td>1</td>
    <td>100</td>
    </tr>
    <tr>
    <td>jack</td>
    <td>2</td>
    <td>10</td>
    </tr>
    <tr>
    <td>penny</td>
    <td>3</td>
    <td>91</td>
    </tr>

    <tr>
    <td>Mike</td>
    <td>4</td>
    <td>83</td>
    </tr>

    <tr>
    <td>jane</td>
    <td>5</td>
    <td>69</td>
    </tr>
    </table>
    </body>
    </html>


    效果如图:

  • 相关阅读:
    display:flex 布局之 骰子
    vue 生命周期
    vue webpack 懒加载
    后台管理页面基本布局
    模拟ie9的placeholder
    常用的功能封装 pool.js
    六位数字字母验证码
    CommonJs AMD CMD
    项目封版后的总结
    jq 回到顶部
  • 原文地址:https://www.cnblogs.com/youxin/p/2290701.html
Copyright © 2011-2022 走看看