tableを見やすくするCSS

<table;>
	<thead>
		<tr>
			<th>プラン名</th>
			<th>価格</th>
			<th>容量</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Aプラン</td>
			<td>1,000円</td>
			<td>100GB</td>
		</tr>
		<tr>
			<td>Bプラン</td>
			<td>1,200円</td>
			<td>120GB</td>
		</tr>
	</tbody>
</table>

tbody:hover td {
	color: #77735a;
	background-color: #f4f3ef;
}

tbody:hover tr:hover td {
	color: #111;
	background-color: #fff;
}

table {
	margin-right: auto;
	margin-left: auto;
	width: 500px;
	font-size: 14px;
	text-align: center;
}

table th,
table td {
	padding: 10px;
	transition: 0.2s;
}