常用简约表格Html+css代码

<style>
#yustb2 {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#yustb2 td, #yustb2 th {
  border: 1px solid #ddd;
  padding: 8px;
}

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

#yustb2 tr:hover {background-color: #ddd;}

#yustb2 th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>
<table id="yustb2">
	<tr>
		<th>Company</th>
		<th>Contact</th>
		<th>Address</th>
		<th>City</th>
	</tr>
	<tr>
		<td>Alibaba</td>
		<td>Ma Yun</td>
		<td>No. 699, Wangshang Road, Binjiang District</td>
		<td>Hangzhou</td>
	</tr>
	<tr>
		<td>APPLE</td>
		<td>Tim Cook</td>
		<td>1 Infinite Loop Cupertino, CA 95014</td>
		<td>Cupertino</td>
	</tr>
	<tr>
		<td>BAIDU</td>
		<td>Li YanHong</td>
		<td>Lixiang guoji dasha,No 58, beisihuanxilu</td>
		<td>Beijing</td>
	</tr>
	<tr>
		<td>Canon</td>
		<td>Tsuneji Uchida</td>
		<td>One Canon Plaza Lake Success, NY 11042</td>
		<td>New York</td>
	</tr>
	<tr>
		<td>Google</td>
		<td>Larry Page</td>
		<td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
		<td>Mountain View</td>
	</tr>
	<tr>
		<td>HUAWEI</td>
		<td>Ren Zhengfei</td>
		<td>Putian Huawei Base, Longgang District</td>
		<td>Shenzhen</td>
	</tr>
	<tr>
		<td>Microsoft</td>
		<td>Bill Gates</td>
		<td>15700 NE 39th St Redmond, WA 98052</td>
		<td>Redmond</td>
	</tr>
	<tr>
		<td>Nokia</td>
		<td>Olli-Pekka Kallasvuo</td>
		<td>P.O. Box 226, FIN-00045 Nokia Group</td>
		<td>Helsinki</td>
	</tr>
	<tr>
		<td>SONY</td>
		<td>Kazuo Hirai</td>
		<td>Park Ridge, NJ 07656</td>
		<td>Park Ridge</td>
	</tr>
	<tr>
		<td>Tencent</td>
		<td>Ma Huateng</td>
		<td>Tencent Building, High-tech Park, Nanshan District</td>
		<td>Shenzhen</td>
	</tr>
</table>

 

<style>
table{margin: auto;text-align: center;}
table tr{height: 60px}
.navpage_detail_2017{width: auto !important}
#yustb1
{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	width:75%;
	min-width: 1000px;
	max-width: 1200px;
	border-collapse:collapse;
}
#yustb1 td, #yustb1 th 
{
	font-size:1em;
	height:50px;
	padding:3px 7px 2px 7px;
}
#yustb1 th 
{
	font-size:1.1em;
	text-align:left;
	padding-top:5px;
	height:50px;
	padding-bottom:4px;
	background-color:#979797;
	color:#ffffff;
}
#yustb1 tr.alt td 
{
	background-color:#e8e8e8;
}
</style>
<table id="yustb1"> 
   <tbody>
    <tr> 
     <th style="width: 50%;text-align: center;">Products</th> 
     <th style="width: 50%;text-align: center;">5S</th> 
    </tr> 
    <tr> 
     <td>Side</td> 
     <td>5 Sides</td> 
    </tr> 
    <tr class="alt"> 
     <td>Capacity</td> 
     <td>1-2 Person</td> 
    </tr> 
    <tr> 
     <td>Height</td> 
     <td>87 inch</td> 
    </tr> 
    <tr class="alt"> 
     <td>Side Length</td> 
     <td>73 inch</td> 
    </tr> 
    <tr> 
     <td>Weight</td> 
     <td>11.6 lb</td>  
    </tr> 
    <tr class="alt"> 
     <td>Tent Weight</td> 
     <td>5.8 lb</td> 
    </tr>
    <tr> 
     <td>Weight</td> 
     <td>11.6 lb</td>  
    </tr> 
    <tr class="alt"> 
     <td>More Parts</td> 
     <td>Less</td>  
    </tr> 
   </tbody>
  </table>

 

 

<style>
table{margin: auto;text-align: center;}
table tr{height: 60px}
.navpage_detail_2017{width: auto !important}
#yustb3
{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	width:75%;
	min-width: 1000px;
	max-width: 1200px;
	border-collapse:collapse;
}
#yustb3 td, #yustb3 th 
{
	font-size:1em;
	height:50px;
	padding:3px 7px 2px 7px;
    border-bottom: 1px solid #c8c8c8;
}
#yustb3 th 
{
	font-size:1.1em;
	text-align:left;
	padding-top:5px;
	height:50px;
	padding-bottom:4px;
	background-color:#b1b1b1;
	color:#ffffff;
}
</style>
<table id="yustb3"> 
   <tbody>
    <tr> 
     <th style="width: 50%;text-align: center;">Products</th> 
     <th style="width: 50%;text-align: center;">5S</th> 
    </tr> 
    <tr> 
     <td>Side</td> 
     <td>5 Sides</td> 
    </tr> 
    <tr class="alt"> 
     <td>Capacity</td> 
     <td>1-2 Person</td> 
    </tr> 
    <tr> 
     <td>Height</td> 
     <td>87 inch</td> 
    </tr> 
    <tr class="alt"> 
     <td>Side Length</td> 
     <td>73 inch</td> 
    </tr> 
    <tr> 
     <td>Weight</td> 
     <td>11.6 lb</td>  
    </tr> 
    <tr class="alt"> 
     <td>Tent Weight</td> 
     <td>5.8 lb</td> 
    </tr>
    <tr> 
     <td>Weight</td> 
     <td>11.6 lb</td>  
    </tr> 
    <tr class="alt"> 
     <td>More Parts</td> 
     <td>Less</td>  
    </tr> 
   </tbody>
  </table>

<style>
table{margin: auto;text-align: center;}
table tr{height: 60px}
.navpage_detail_2017{width: auto !important}
#yustb4
{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	width:75%;
	min-width: 1000px;
	max-width: 1200px;
	border-collapse:collapse;
}
#yustb4 td, #yustb4 th 
{
	font-size:1em;
	height:50px;
	padding:3px 7px 2px 7px;
    border-bottom: 1px solid #c8c8c8;
}
#yustb4 th 
{
	font-size:1.1em;
	text-align:left;
	padding-top:5px;
	height:50px;
	padding-bottom:4px;
	background-color:#b1b1b1;
	color:#ffffff;
}
</style>
<table id="yustb4"> 
   <tbody>
    <tr> 
     <th style="width: 20%;text-align: center;">Products</th> 
     <th style="width: 20%;text-align: center;">5S</th> 
     <th style="width: 20%;text-align: center;">6S</th> 
     <th style="width: 20%;text-align: center;">7S</th> 
     <th style="width: 20%;text-align: center;">7S pro</th> 
    </tr> 
    <tr> 
     <td>Weight</td> 
     <td>5 Sides</td>
     <td>Side</td> 
     <td>5 Sides</td>
     <td>Side</td>  
    </tr> 
    <tr class="alt"> 
     <td>Size</td> 
     <td>Side</td> 
     <td>5 Sides</td>
     <td>Side</td> 
     <td>5 Sides</td>
    </tr> 
    <tr> 
     <td>Height</td> 
     <td>5 Sides</td>
     <td>Side</td> 
     <td>5 Sides</td>
     <td>Side</td> 
    </tr> 
   </tbody>
  </table>