CSS Table (表格)示例代码
<!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">
<tbody>
<tr>
<th>2020年11月</th>
<th>2019年11月</th>
<th>程序语言</th>
<th>等级</th>
<th>更改</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<a href="https://www.ymama.net/" target="_blank">C</a>
</td>
<td>16.21%</td>
<td>+0.17%</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>
<a href="https://www.ymama.net/" target="_blank">Python</a>
</td>
<td>12.12%</td>
<td>+2.27%</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td>
<a href="https://www.ymama.net/" target="_blank">Java</a>
</td>
<td>11.68%</td>
<td>-4.57%</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>
<a href="https://www.ymama.net/" target="_blank">C++</a>
</td>
<td>7.60%</td>
<td>+1.99%</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>
<a href="https://www.ymama.net/" target="_blank">C#</a>
</td>
<td>4.67%</td>
<td>+0.36%</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>
<a href="https://www.ymama.net/" target="_blank">Visual Basic</a>
</td>
<td>4.01%</td>
<td>-0.22%</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>
<a href="https://www.ymama.net/" target="_blank">JavaScript</a>
</td>
<td>2.03%</td>
<td>+0.10%</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>
<a href="https://www.ymama.net/" target="_blank">PHP</a>
</td>
<td>1.79%</td>
<td>0.07%</td>
</tr>
<tr>
<td>9</td>
<td>16</td>
<td>
<a href="https://www.ymama.net/" target="_blank">R</a>
</td>
<td>1.64%</td>
<td>+0.66%</td>
</tr>
<tr>
<td>10</td>
<td>9</td>
<td>
<a href="https://www.ymama.net/" target="_blank">SQL</a>
</td>
<td>1.54%</td>
<td>+0.15%</td>
</tr>
</tbody>
</table>运行截图：
