首先說明：<th>列（字體會加粗），<td>列丸卷，<tr>行

1.普通表格

<style>
table, th, td {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>

雙邊框.JPG

2.合并邊框

table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}
</style>

單邊框.JPG

3.合并里面線

<style>
table {
    border-collapse: collapse;
    border: 1px solid black;
}
</style>

合并里面.JPG

4.Table Width and Height

<style>
table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th {
    height: 50px;
}
</style>

寬和高.JPG

5.水平對齊

<style>
table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th {
    text-align: left;
}

左對齊.JPG

<style>
table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}

td {
    height: 50px;
    vertical-align: bottom;
}
</style>

底對齊.JPG

6.Table Padding

<style>
table, td, th {    
    border: 1px solid #ddd;
    text-align: left;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 15px;
}
</style>

padding.JPG

7.水平分規(guī)

<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
</style>

t2.JPG

8.鼠標經(jīng)過有東西的表格

<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

tr:hover{background-color:#f5f5f5}
</style>

t3.JPG

9.有條紋的表格

<style>
table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    text-align: left;
    padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
</style>

條紋.JPG

• 加上背景色

<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #4CAF50;
    color: white;
}
</style>

背景色.JPG

10.響應(yīng)時表格

<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {[圖片上傳中...(拉動.JPG-cc9f7-1533173680116-0)]

    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}
</style>

拉動.JPG