HTML Tables Tutorial
2017-11-20 本文已影响0人
5335773a96e9
屏幕快照 2017-11-20 上午9.52.01.jpg
<!DOCTYPE html>
<html>
<head>
<title>Table Demo</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<h1>Groceries</h1>
<table>
<tr>
<th>Item Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Aisle Number</th>
</tr>
<tr>
<td>Milk</td>
<td>$3.00</td>
<td>1</td>
<td>A3</td>
</tr>
<tr>
<td>Whole Wheat Bread</td>
<td>$2.85</td>
<td>1</td>
<td>A5</td>
</tr>
<tr>
<td>Carrots</td>
<td>$2.00</td>
<td>2</td>
<td>C2</td>
</tr>
<tr>
<td>Apples</td>
<td>$3.00</td>
<td>4</td>
<td>C2</td>
</tr>
</table>
</body>
</html>
table {
border-collapse: collapse;
}
table th {
text-align: left;
background-color: #3a6070;
color: #FFF;
padding: 4px 30px 4px 8px;
}
table td {
border: 1px solid #e3e3e3;
padding: 4px 8px;
}
table tr:nth-child(odd) td {
background-color: #e7edf0;
}
