精华内容
下载资源
问答
  • CSS 表格样式
    千次阅读
    2020-07-21 23:07:44

    CSS table

    表格

    <table>标签样式

    属性
    border表格的边框
    cellspacing单元格与单元格边框的间距(默认2像素)
    cellpadding单元格内容与单元格边框的间距(默认1像素)
    width表格宽
    height表格高
    align表格在网页中的对其方式(left、center、right)
    rowspan跨行合并单元格
    colspan跨列合并单元格
    <table border="1" width="50%" align="center">
        <tr>
            <td>编号</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td>01</td>
            <td>唐僧</td>
        </tr>
        <tr>
            <td>02</td>
            <td>悟空</td>
        </tr>
        <tr>
            <td>03</td>
            <td>八戒</td>
        </tr>
        <tr>
            <td>04</td>
            <td>沙僧</td>
        </tr>
        <tr>
            <td colspan="2">共4人</td>
        </tr>
    </table>
    

    长表格

    表格可分为三个部分:头部thead、主题tbody、底部tfoot、th头部单元格。

    <table border="1" width='50%' align="center">
        <thead>
            <tr>
                <th>日期</th>
                <th>收入</th>
                <th>支出</th>
                <th>合计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2020.1.1</td>
                <td>2000</td>
                <td>1000</td>
                <td>3000</td>
            </tr>
            <tr>
                <td>2020.1.1</td>
                <td>2000</td>
                <td>1000</td>
                <td>3000</td>
            </tr>
            <tr>
                <td>2020.1.1</td>
                <td>2000</td>
                <td>1000</td>
                <td>3000</td>
            </tr>
            <tr>
                <td>2020.1.1</td>
                <td>2000</td>
                <td>1000</td>
                <td>3000</td>
            </tr>
        </tbody>
        <tfoot>
            <td></td>
            <td></td>
            <td>合计</td>
            <td>10000</td>
        </tfoot>
    </table>
    

    css样式(推荐使用)

    属性说明
    border-collapse边框合并是否合并
    separate 分开,默认值
    collapse 合并
    text-align单元格里内容水平对齐方式
    vertical-align单元格里内容垂直对齐方式
    在这里插入图片描述
    <style>
        table {
            width: 50%;
            border: 1px solid black;
            margin: 0 auto;
            border-collapse: collapse;
        }
    
        td {
            height: 50px;
            border: 1px solid black;
            text-align: center;
            vertical-align: center;
        }
    
        tbody tr:nth-child(even) {
            background-color: antiquewhite;
        }
    </style>
    
    <body>
        <table>
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>地址</td>
            </tr>
            <tr>
                <td>01</td>
                <td>唐僧</td>
                <td>100</td>
                <td>西天</td>
            </tr>
            <tr>
                <td>02</td>
                <td>孙悟空</td>
                <td>500</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>03</td>
                <td>猪八戒</td>
                <td>400</td>
                <td>高老庄</td>
            </tr>
            <tr>
                <td>04</td>
                <td>沙和尚</td>
                <td>300</td>
                <td>流沙河</td>
            </tr>
        </table>
    </body>
    

    在表格中,若没有使用tbody而是直接使用tr,这时浏览器会自动创建一个tbody,并将所有tr全部放到tbody中,所以tr不受table的子元素。

    下图是在浏览器中的结构:

    在这里插入图片描述
    更多相关内容
  • 主要介绍了用CSS美化后的表格样式,看起来非常的柔和、舒服、清爽,需要的朋友可以参考下
  • CSS表格样式1

    2019-05-27 02:44:51
    NULL 博文链接:https://lwyingdao.iteye.com/blog/602713
  • 第一个例子的样式看起平淡无奇,不过喜欢简约风格的人也许会感兴趣,这类似于印刷字体风格,简结的同时也不失灵动的特点(当鼠标滑上去的时候)。注:个人喜欢这里的第二个图文混排的例子,但是发现老外更喜欢第一个...
  • css表格样式打包下载

    2012-06-01 10:16:10
    我搜集的网页css表格样式.直接拿来用就可以了
  • 一些非常漂亮实用的CSS表格样式,使用方便.页面简洁!
  • 4款简单常见的纯CSS表格(table)样式

    千次阅读 2021-03-30 10:19:40
    添加pure-table类样式表格, 此类向表元素添加填充(padding)和边框(borders),并使表头突出。 默认表格 html代码 <!DOCTYPE html> <html lang="en"> <head> <title>Table_Simple CSS ...

    1、默认表格(default table)
    添加pure-table类样式化表格, 此类向表元素添加填充(padding)和边框(borders),并使表头突出。
    在这里插入图片描述
    默认表格
    html代码

     
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Table_Simple CSS for HTML tables</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     
    <style type="text/css">
    html {
        font-family: sans-serif;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
     
    body {
        margin: 10px;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
     
    td,th {
        padding: 0;
    }
     
    .pure-table {
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #cbcbcb;
    }
     
    .pure-table caption {
        color: #000;
        font: italic 85%/1 arial,sans-serif;
        padding: 1em 0;
        text-align: center;
    }
     
    .pure-table td,.pure-table th {
        border-left: 1px solid #cbcbcb;
        border-width: 0 0 0 1px;
        font-size: inherit;
        margin: 0;
        overflow: visible;
        padding: .5em 1em;
    }
     
    .pure-table thead {
        background-color: #e0e0e0;
        color: #000;
        text-align: left;
        vertical-align: bottom;
    }
     
    .pure-table td {
        background-color: transparent;
    }
    </style>
    </head>
    <body>
        <table class="pure-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Make</th>
                    <th>Model</th>
                    <th>Year</th>
                </tr>
            </thead>
        
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Honda</td>
                    <td>Accord</td>
                    <td>2009</td>
                </tr>
        
                <tr>
                    <td>2</td>
                    <td>Toyota</td>
                    <td>Camry</td>
                    <td>2012</td>
                </tr>
        
                <tr>
                    <td>3</td>
                    <td>Hyundai</td>
                    <td>Elantra</td>
                    <td>2010</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>
    
    

    2、加边框的表格(Bordered Table)
    为所有单元(cells)添加垂直和水平边框,用pure-table-bordered样式化表格

    元素。
    在这里插入图片描述
    加边框的表格(Bordered Table)
    html代码

     
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Table_Simple CSS for HTML tables</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     
    <style type="text/css">
    html {
        font-family: sans-serif;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
     
    body {
        margin: 10px;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
     
    td,th {
        padding: 0;
    }
     
    .pure-table {
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #cbcbcb;
    }
     
    .pure-table caption {
        color: #000;
        font: italic 85%/1 arial,sans-serif;
        padding: 1em 0;
        text-align: center;
    }
     
    .pure-table td,.pure-table th {
        border-left: 1px solid #cbcbcb;
        border-width: 0 0 0 1px;
        font-size: inherit;
        margin: 0;
        overflow: visible;
        padding: .5em 1em;
    }
     
    .pure-table thead {
        background-color: #e0e0e0;
        color: #000;
        text-align: left;
        vertical-align: bottom;
    }
     
    .pure-table td {
        background-color: transparent;
    }
     
    .pure-table-bordered td {
        border-bottom: 1px solid #cbcbcb;
    }
     
    .pure-table-bordered tbody>tr:last-child>td {
        border-bottom-width: 0;
    }
    </style>
    </head>
    <body>
        <table class="pure-table pure-table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Make</th>
                    <th>Model</th>
                    <th>Year</th>
                </tr>
            </thead>
        
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Honda</td>
                    <td>Accord</td>
                    <td>2009</td>
                </tr>
        
                <tr>
                    <td>2</td>
                    <td>Toyota</td>
                    <td>Camry</td>
                    <td>2012</td>
                </tr>
        
                <tr>
                    <td>3</td>
                    <td>Hyundai</td>
                    <td>Elantra</td>
                    <td>2010</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>
    
    

    3、只有水平边框的表格(Table with Horizontal Borders)
    如果你喜欢只要水平线边框的表格,那么添加pure-table-horizontal类到表格

    元素。
    在这里插入图片描述
    只有水平边框的表格

     
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Table_Simple CSS for HTML tables</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     
    <style type="text/css">
    html {
        font-family: sans-serif;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
     
    body {
        margin: 10px;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
     
    td,th {
        padding: 0;
    }
     
    .pure-table {
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #cbcbcb;
    }
     
    .pure-table caption {
        color: #000;
        font: italic 85%/1 arial,sans-serif;
        padding: 1em 0;
        text-align: center;
    }
     
    .pure-table td,.pure-table th {
        border-left: 1px solid #cbcbcb;
        border-width: 0 0 0 1px;
        font-size: inherit;
        margin: 0;
        overflow: visible;
        padding: .5em 1em;
    }
     
    .pure-table thead {
        background-color: #e0e0e0;
        color: #000;
        text-align: left;
        vertical-align: bottom;
    }
     
    .pure-table td {
        background-color: transparent;
    }
    .pure-table-horizontal td,.pure-table-horizontal th {
        border-width: 0 0 1px 0;
        border-bottom: 1px solid #cbcbcb;
    }
     
    .pure-table-horizontal tbody>tr:last-child>td {
        border-bottom-width: 0;
    }
    </style>
    </head>
    <body>
        <table class="pure-table pure-table-horizontal">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Make</th>
                    <th>Model</th>
                    <th>Year</th>
                </tr>
            </thead>
        
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Honda</td>
                    <td>Accord</td>
                    <td>2009</td>
                </tr>
        
                <tr>
                    <td>2</td>
                    <td>Toyota</td>
                    <td>Camry</td>
                    <td>2012</td>
                </tr>
        
                <tr>
                    <td>3</td>
                    <td>Hyundai</td>
                    <td>Elantra</td>
                    <td>2010</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>
    
    

    4、条纹表格(Striped Table)
    当表格较长的时候,通常会用到条纹表格,这样更容易区分数据。在需要改变背景颜色的行tr元素添加pure-table-odd类,便能实现斑马样式的效果。
    在这里插入图片描述
    条纹表格(Striped Table)
    html代码

     
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Table_Simple CSS for HTML tables</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     
    <style type="text/css">
    html {
        font-family: sans-serif;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
     
    body {
        margin: 10px;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
     
    td,th {
        padding: 0;
    }
     
    .pure-table {
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #cbcbcb;
    }
     
    .pure-table caption {
        color: #000;
        font: italic 85%/1 arial,sans-serif;
        padding: 1em 0;
        text-align: center;
    }
     
    .pure-table td,.pure-table th {
        border-left: 1px solid #cbcbcb;
        border-width: 0 0 0 1px;
        font-size: inherit;
        margin: 0;
        overflow: visible;
        padding: .5em 1em;
    }
     
    .pure-table thead {
        background-color: #e0e0e0;
        color: #000;
        text-align: left;
        vertical-align: bottom;
    }
     
    .pure-table td {
        background-color: transparent;
    }
     
    .pure-table-odd td {
        background-color: #f2f2f2;
    }
    </style>
    </head>
    <body>
        <table class="pure-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Make</th>
                    <th>Model</th>
                    <th>Year</th>
                </tr>
            </thead>
        
            <tbody>
                <tr class="pure-table-odd">
                    <td>1</td>
                    <td>Honda</td>
                    <td>Accord</td>
                    <td>2009</td>
                </tr>
        
                <tr>
                    <td>2</td>
                    <td>Toyota</td>
                    <td>Camry</td>
                    <td>2012</td>
                </tr>
        
                <tr class="pure-table-odd">
                    <td>3</td>
                    <td>Hyundai</td>
                    <td>Elantra</td>
                    <td>2010</td>
                </tr>
        
                <tr>
                    <td>4</td>
                    <td>Ford</td>
                    <td>Focus</td>
                    <td>2008</td>
                </tr>
        
                <tr class="pure-table-odd">
                    <td>5</td>
                    <td>Nissan</td>
                    <td>Sentra</td>
                    <td>2011</td>
                </tr>
        
                <tr>
                    <td>6</td>
                    <td>BMW</td>
                    <td>M3</td>
                    <td>2009</td>
                </tr>
        
                <tr class="pure-table-odd">
                    <td>7</td>
                    <td>Honda</td>
                    <td>Civic</td>
                    <td>2010</td>
                </tr>
        
                <tr>
                    <td>8</td>
                    <td>Kia</td>
                    <td>Soul</td>
                    <td>2010</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>
    
    
    展开全文
  • CSS表格样式和列表样式

    万次阅读 2018-05-18 15:44:14
    -----------------------------------------------CSS表格样式和列表样式--------------------------------------------------Table样式处理代码示例:&lt;!DOCTYPE html&gt; &lt;html&gt; &...

    -----------------------------------------------CSS的表格样式和列表样式--------------------------------------------------

    Table样式处理

    代码示例:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>表格设置</title>

    <style type="text/css">

    .mytable{

        border:1px solid #A6C1E4;

        font-family:Arial;

        border-collapse: collapse;

    }

    table th{

        border:1px solid black;

        background-color:#71c1fb;

        width:100px;

        height:20px;

        font-size:15px;

    }

    table td{

        border:1px solid #A6C1E4;

        text-align:center;

        height:15px;

        padding-top:5px;

        font-size:12px;

    }

     

    .double{

        background-color:#c7dff6;

    }

    </style>

    </head>

    <body>

     

    <table class="mytable">

        <tr>

            <th>姓名</th>

            <th>年龄</th>

            <th>性别</th>

            <th>地址</th>

            <th>生日</th>

            <th>工资</th>

        </tr>

        <tr>

            <td>李小龙</td>

            <td>32</td>

            <td></td>

            <td>香港</td>

            <td>1955-07-23</td>

            <td>10000</td>

        </tr>  

        <tr class="double">

            <td>李小龙</td>

            <td>32</td>

            <td></td>

            <td>香港</td>

            <td>1955-07-23</td>

            <td>10000</td>

        </tr>  

        <tr>

            <td>李小龙</td>

            <td>32</td>

            <td></td>

            <td>香港</td>

            <td>1955-07-23</td>

            <td>10000</td>

        </tr>  

        <tr class="double">

            <td>李小龙</td>

            <td>32</td>

            <td></td>

            <td>香港</td>

            <td>1955-07-23</td>

            <td>10000</td>

        </tr>  

        <tr>

            <td>李小龙</td>

            <td>32</td>

            <td></td>

            <td>香港</td>

            <td>1955-07-23</td>

            <td>10000</td>

        </tr>  

        <tr class="double">

            <td>李小龙</td>

            <td>32</td>

            <td></td>

            <td>香港</td>

            <td>1955-07-23</td>

            <td>10000</td>

        </tr>  

        <tr>

            <td>李小龙</td>

            <td>32</td>

            <td></td>

            <td>香港</td>

            <td>1955-07-23</td>

            <td>10000</td>

        </tr>  

        <tr class="double">

            <td>李小龙</td>

            <td>32</td>

            <td></td>

            <td>香港</td>

            <td>1955-07-23</td>

            <td>10000</td>

        </tr>

    </table>

    </body>

    </html>

    ---------------------------------------------------------------------------------------

    列表样式

    代码示例:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>列表样式</title>

    <style type="text/css">

    body{

        background-color:#f8d080;

        font-family:黑体;

        font-size:15px;

    }

    ul{

        list-style-type:none;/* 去掉li前面的点 */

    }

    li{

        margin:10px;

        background: url(icon.gif) no-repeat;

        padding-left:30px;

        padding-top:5px;

        height:30px;

    }

     

    </style>

    </head>

    <body>

        <ul>

            <li>篮球运动</li>

            <li>田径运动</li>

            <li>足球运动</li>

            <li>游泳运动</li>

        </ul>

    </body>

    </html>

    --------------------------------------------------------------------------------------------

    列表菜单制作

    代码示例:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>列表样式</title>

    <style type="text/css">

    body{

        background-color:#ffdee0;

        font-family:黑体;

        font-size:18px;

    }

    ul{

        list-style-type:none;

    }

    ul li{

        border:1px solid #ffff00;

        width:200px;

        text-align:center;

        height:20px;

        margin-bottom:2px;

        background-color:#c11136;

    }

    li a{

        text-decoration:none;

        color:yellow;

    }

    li:hover{

        background-color:blue;

        color:white;

        border:1px solid black;

    }

    li a:hover{

        color:white;

    }

    a:VISITED {

        color:red;

    }

    </style>

    </head>

    <body>

        <ul>

            <li><a href="#">学生管理</a></li>

            <li><a href="#">老师管理</a></li>

            <li><a href="#">考试管理</a></li>

            <li><a href="#">考勤管理</a></li>

        </ul>

    </body>

    </html>

    -----------------------------------------------------------------------------------------

    列表制作横向菜单

    代码示例:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>列表样式</title>

    <style type="text/css">

    body{

        background-color:#ffdee0;

        font-family:黑体;

        font-size:15px;

    }

    ul{

        list-style-type:none;

    }

    ul li{

        width:100px;

        text-align:center;

        height:20px;

        margin-right:10px;

        background-color:#c11136;

        float:left;

        padding-top:3px;

        border-bottom:5px solid black;

    }

    li a{

        display:block;

        text-decoration:none;

        color:yellow;

    }

    li:hover{

        background-color:blue;

        color:white;

        border:1px solid yellow;

        border-bottom:5px solid black;

       

    }

    li a:hover{

        color:yellow;

    }

    a:VISITED {

        color:white;

    }

    </style>

    </head>

    <body>

        <ul>

            <li><a href="#">学生管理</a></li>

            <li><a href="#">老师管理</a></li>

            <li><a href="#">考试管理</a></li>

            <li><a href="#">考勤管理</a></li>

        </ul>

    </body>

    </html>

    展开全文
  • 老左并不是一名网页设计师,但是经常在...随着时间的积累,我们越发感觉到CSS样式的无穷奇妙,比如我们在制作某个表格时候,可以简单的利用CSS样式表的修改变化多样的CSS表格样式。在页面布局和内容分享的时候,...

    原文出处:http://www.laozuo.org/4631.html

    老左并不是一名网页设计师,但是经常在博客上捣鼓、修改一些自认为不太好的用户体验也仅仅局限在修改一些简单的CSS样式上,遇到不能解决的问题可以通过搜索查阅文档。随着时间的积累,我们越发感觉到CSS样式的无穷奇妙,比如我们在制作某个表格时候,可以简单的利用CSS样式表的修改变化多样的CSS表格样式。在页面布局和内容分享的时候,表格是比较常用到的,有些时候老左在分享评测内容的时候,为了图省事可能就直接截图,以后可能会多一些样式的分享,这样用户体验以及如果信息有变动可以直接修改,而不是再截图。

    在之前博文中,已经有分享过几篇关于CSS表格样式的内容:

    16款用户体验优秀的HTML CSS价格表格模板 附演示及下载

    8款设计师常用漂亮的HTML CSS表格样式

    6款漂亮HTML CSS样式用户留言表单

    今天老左在浏览几个海外前端博客时候,看到以下7款颜色CSS表格样式的整理还是比较好的,尤其是需要在网页中添加表格时候,看似简单的样式,但是在需要使用的时候就直接复制,节省很多时间。

    第一种:

    CSS表格样式之一

    CSS表格样式之一

    CSS样式代码部分:

    /* Border styles */
    #table-1 thead, #table-1 tr {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(230, 189, 189);
    }
    #table-1 {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(230, 189, 189);
    }
    
    /* Padding and font style */
    #table-1 td, #table-1 th {
    padding: 5px 10px;
    font-size: 12px;
    font-family: Verdana;
    color: rgb(177, 106, 104);
    }
    
    /* Alternating background colors */
    #table-1 tr:nth-child(even) {
    background: rgb(238, 211, 210)
    }
    #table-1 tr:nth-child(odd) {
    background: #FFF
    }

    第二种:

    CSS表格样式之二

    CSS表格样式之二

    CSS样式代码部分:

    /* Border styles */
    #table-2 thead, #table-2 tr {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(230, 189, 189);
    }
    #table-2 {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(230, 189, 189);
    }
    
    /* Padding and font style */
    #table-2 td, #table-2 th {
    padding: 5px 10px;
    font-size: 12px;
    font-family: Verdana;
    color: rgb(177, 106, 104);
    }
    
    /* Alternating background colors */
    #table-2 tr:nth-child(even) {
    background: rgb(238, 211, 210)
    }
    #table-2 tr:nth-child(odd) {
    background: #FFF
    }

    第三种:

    CSS表格样式之三

    CSS表格样式之三

    CSS样式代码部分:

    /* Border styles */
    #table-3 thead, #table-3 tr {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(235, 242, 224);
    }
    #table-3 {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(235, 242, 224);
    }
    
    /* Padding and font style */
    #table-3 td, #table-3 th {
    padding: 5px 10px;
    font-size: 12px;
    font-family: Verdana;
    color: rgb(149, 170, 109);
    }
    
    /* Alternating background colors */
    #table-3 tr:nth-child(even) {
    background: rgb(230, 238, 214)
    }
    #table-3 tr:nth-child(odd) {
    background: #FFF
    }

    第四种:

    CSS表格样式之四

    CSS表格样式之四

    CSS代码样式部分:

    /* Border styles */
    #table-4 thead, #table-4 tr {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(211, 202, 221);
    }
    #table-4 {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(211, 202, 221);
    }
    
    /* Padding and font style */
    #table-4 td, #table-4 th {
    padding: 5px 10px;
    font-size: 12px;
    font-family: Verdana;
    color: rgb(95, 74, 121);
    }
    
    /* Alternating background colors */
    #table-4 tr:nth-child(even) {
    background: rgb(223, 216, 232)
    }
    #table-4 tr:nth-child(odd) {
    background: #FFF
    }

    第五种:

    CSS表格样式之五

    CSS表格样式之五

    CSS代码样式部分:

    /* Table Head */
    #table-5 thead th {
    background-color: rgb(156, 186, 95);
    color: #fff;
    border-bottom-width: 0;
    }
    
    /* Column Style */
    #table-5 td {
    color: #000;
    }
    /* Heading and Column Style */
    #table-5 tr, #table-5 th {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(156, 186, 95);
    }
    
    /* Padding and font style */
    #table-5 td, #table-5 th {
    padding: 5px 10px;
    font-size: 12px;
    font-family: Verdana;
    font-weight: bold;
    }

    第六种:

    CSS表格样式之六

    CSS表格样式之六

    CSS样式代码部分:

    /* Table Head */
    #table-6 thead th {
    background-color: rgb(128, 102, 160);
    color: #fff;
    border-bottom-width: 0;
    }
    
    /* Column Style */
    #table-6 td {
    color: #000;
    }
    /* Heading and Column Style */
    #table-6 tr, #table-6 th {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(128, 102, 160);
    }
    
    /* Padding and font style */
    #table-6 td, #table-6 th {
    padding: 5px 10px;
    font-size: 12px;
    font-family: Verdana;
    font-weight: bold;
    }

    第七种:

    CSS表格样式之七

    CSS表格样式之七

    CSS样式代码部分:

    /* Table Head */
    #table-7 thead th {
    background-color: rgb(81, 130, 187);
    color: #fff;
    border-bottom-width: 0;
    }
    
    /* Column Style */
    #table-7 td {
    color: #000;
    }
    /* Heading and Column Style */
    #table-7 tr, #table-7 th {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(81, 130, 187);
    }
    
    /* Padding and font style */
    #table-7 td, #table-7 th {
    padding: 5px 10px;
    font-size: 12px;
    font-family: Verdana;
    font-weight: bold;
    }

    以上7种颜色的CSS表格样式部分,根据我们自己的需要可以直接复制不同的颜色部分加上行列的修改。然后加在下面的TABLE表格部分中:

    <table id="table-1"> <!-- Replace "table-1" with any of the design numbers -->
    <thead>
    <th>Name</th>
    <th>City</th>
    <th>Phone</th>
    </thead>
    <tbody>
    <tr>
    <td>Albert Ellis</td>
    <td>New York</td>
    <td>+1 718 000000</td>
    </tr>
    <tr>
    <td>Marcus Aurelius</td>
    <td>Rome</td>
    <td>+1 718 000000</td>
    </tr>
    <tr>
    <td>Epictetus</td>
    <td>Greece</td>
    <td>+1 718 000000</td>
    </tr>
    <tr>
    <td>Aristotle</td>
    <td>Greece</td>
    <td>+1 718 000000</td>
    </tr>
    </tbody>
    </table>

    这个文档中整体框架还是用的TABLE,比较适合文章内容中插入样式的部分使用。

    展开全文
  • 先看效果图: CSS: 复制代码代码如下: <style type=”text/css”> table { max-width: 100%; background-color: transparent; border-collapse: collapse; border-spacing: 0; } .table { width: 100%; ...
  • CSS全局样式 1、布局容器类样式:.container 和 .container-fluid .container 固定宽度并且具有响应式。 .container-fluid 自由宽度(100%宽度)。 这2个class是直接在body标签下建立一个div标签,class等于这2个中的...
  • 四款好看实用的css表格样式分享

    千次阅读 2021-06-13 07:00:21
    tableclass="hovertable"trthInfoHeader1/ththInfoHeader2/ththInfoHeader3/th/trtronmouseover="this.style.backgroundColor=#ffff66".../table 以上w3cschool为大家推荐的几种比较常见和常用的CSS表格样式了...
  • CSS表格样式

    千次阅读 2019-06-26 11:09:26
    表格 table,th,td{ border: 1px lightblue solid; border-collapse: collapse; } table{ width:80%; margin: 0px auto; } th,td{ padding: 10px; } th{ background-color: aqua; color: #000; } ...
  • css设置表格样式

    万次阅读 2019-04-09 21:31:17
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>设置表格的边框</title> <style type="text/css"> .t{ border: 1px gray solid; bo...
  • CSS表格边框50多种精美标签样式(边框也精彩) 直接复制就可以用,几乎都是标签样式 CSS表格边框50多种精美标签样式(边框也精彩) 直接复制就可以用,几乎都是标签样式
  • css表格样式

    2017-12-20 20:20:08
    css表格样式链接:http://www.runoob.com/try/try.php?filename=try_ng_tables_css感觉这个css写的很好,简洁又好看! table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } ...
  • html纯css实现表格样式

    2022-01-04 14:55:12
    html纯css实现表格样式
  • CSS:设置表格样式

    2021-12-11 21:33:31
    设置前: <!DOCTYPE html> <... <head>...meta charset="UTF-8">...表格样式</title> </head> <body> <table> <tr> <th>名称</th> <th>职.
  • CSS控制表格样式

    2021-12-12 19:40:44
    css
  • 即使在DIV满天飞的今天,Table在网页的布局中还是少不了的,因为当需要输出数据时,Table布局远远比DIV布局有优势,而且同样的我们可以通过CSS来控制表格样式。要知道WEB标准并非是通篇的DIV CSS,而是倡导采用更...
  • 精美的css控制表格样式,可以选择不同的css控制表格的展现形式。
  • CSS实现表格样式及全选功能,详情看博客http://blog.csdn.net/mybelief321/article/details/50276253
  • css3表格样式产品价格页面表格样式
  • CSS表格样式设计

    2011-11-29 09:06:59
    用示例方式展示如何用CSS进行表格样式设计
  • 漂亮大气的表格样式

    2020-12-17 13:27:18
    漂亮大气的表格样式
  • 这是一款非常美观的响应式css3表格样式代码,网页table表格的默认样式比较普通,这款经过css3美化的表格就显得非常出众了,而且浏览器宽度窄的时候会变成纵排,相当灵活实用。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 106,728
精华内容 42,691
关键字:

css表格样式大全