table表格实现

最新推荐文章于 2022-06-25 11:55:08 发布

兮夏-

最新推荐文章于 2022-06-25 11:55:08 发布

阅读量283

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/m0_46693606/article/details/124145942

版权

css

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

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

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

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

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>
<table id="customers">
	<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>
</body>
</html>