首先说明：<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.水平分规

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

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

t2.JPG

8.鼠标经过有东西的表格

<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.响应时表格

<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