CSS中table表格的两种使用方法（实例）

2020-11-27 来源：我们爱旅游

这篇文章给大家介绍的内容就是关于CSS中table表格的两种使用方法（实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1.普通表格

<!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>

2.一個漂亮的表格

<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>

全部栏目

CSS中table表格的两种使用方法（实例）