Two ways to use tables in CSS (examples)-CSS Tutorial-php.cn

Two ways to use tables in CSS (examples)

不言

Release： 2018-08-06 16:53:16

Original

2856 people have browsed it

This article introduces to you two methods (examples) of using tables in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Ordinary form

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>CSS 表格。</title>
    <style>
        table {            
       
        width: 50%;            
        border-collapse: collapse; 
            /*border-collapse 属性设置是否将表格边框折叠为单一边框*/
        }

        table, th, td {            
        border: 1px solid blue;        
        }

        th {            
        height: 50px;            
        background-color: green;            
        color: white;        
        }

        td {            
        text-align: center;            
        padding: 5px; /*表格内边距*/
        }
    </style></head><body><table>
    <tr>
        <th>Firsetname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td>jack1</td>
        <td>jack2</td>
    </tr>
    <tr>
        <td>jack3</td>
        <td>jack4</td>
    </tr>
    </table>
    </body>
    </html>

Copy after login

2. A beautiful form

<html><head>
    <meta charset="utf-8">
    <style type="text/css">
        #customers {            
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;            
        width: 100%;            
        border-collapse: collapse;        
        }

        #customers td, #customers th {            
        font-size: 1em;            
        border: 1px solid #98bf21;            
        padding: 3px 7px 2px 7px;        
        }

        #customers th {            
        font-size: 1.1em;            
        text-align: left;            
        padding-top: 5px;            
        padding-bottom: 4px;            
        background-color: #A7C942;            
        color: #ffffff;        }

        #customers tr.alt td {            
        color: #000000;            
        background-color: #EAF2D3;        
        }
    </style></head><body><table id="customers">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>

    <tr>
        <td>apple</td>
        <td>job</td>
    </tr>

    <tr class="alt">
        <td>wang</td>
        <td>jack</td>
    </tr>
    </table>
    </body>
    </html>

Copy after login

Related recommendations:

Summary of the font attribute in HTML

How does the html5 code implement the progress bar function? (Example)

The above is the detailed content of Two ways to use tables in CSS (examples). For more information, please follow other related articles on the PHP Chinese website!