table表格使用程式碼例項

螞蟻小編發表於2017-03-16

分享一段程式碼例項，它演示了使用table製作表格的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
table{
  margin: 0px 20px 0px 20px;
  border:solid thin black;
  border-collapse: collapse;
  caption-side:bottom;
}
td,th{
  border: thin dotted gray;
  padding: 5px;
}
th{
  background-color: #cc6600;
}
 
caption{
  font-style: italic;
  padding-top: 8px;
}
 
tr:nth-child(odd){
  background-color: #fcba7a;
}
 
td table th{
  background-color: white;
}
</style>
</head>
<body>
<table> 
  <caption>The cities I visited on my Segway's USA travels</caption>
  <tr>
    <th>City</th>
    <th>Date</th>
    <th>Temperature</th>
    <th>Altitude</th>
    <th>Population</th>
    <th>Diner Rating</th>
  </tr>
  <tr>
    <td>Walla Walla, WA</td>
    <td class="center">June 15th</td>
    <td class="center">75</td>
    <td class="right">1,204 ft</td>
    <td class="right">29,686</td>
    <td class="center">4/5</td>
  </tr>
  <tr class="cellcolor">
    <td>Magic City, ID</td>
    <td class="center">June 25th</td>
    <td class="center">74</td>
    <td class="right">5,312 ft</td>
    <td class="right">50</td>
    <td class="center">3/5</td>
  </tr>
  <tr>
    <td>Bountiful, UT</td>
    <td class="center">July 10th</td>
    <td class="center">91</td>
    <td class="right">4,226 ft</td>
    <td class="right">41,173</td>
    <td class="center">4/5</td>
  </tr>
  <tr class="cellcolor">
    <td>last chance, CD</td>
    <td class="center">July 23th</td>
    <td class="center">102</td>
    <td class="right">4,780 ft</td>
    <td class="right">256</td>
    <td class="center">3/5</td>
  </tr>
  <tr>
    <td rowspan="2" >Thuth or consequences, NM</td>
    <td class="center">August 9th</td>
    <td class="center">93</td>
    <td rowspan="2" class="right">4,242ft</td>
    <td rowspan="2" class="right">7,289</td>
    <td class="center">5/5</td>
  </tr>
  <tr>
    <td class="center">August 27th</td>
    <td class="center">98</td>
    <td class="center">
      <table>
        <tr>
          <td>Tess</td>
          <td>5/5</td>
        </tr>
        <tr>
          <td>Tony</td>
          <td>4/5</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr class="cellcolor">
    <td>Why, AZ</td>
    <td class="center">August 18th</td>
    <td class="center">104</td>
    <td class="right">860ft</td>
    <td class="right">480</td>
    <td class="center">3/5</td>
  </tr>
</table>
</body>
</html>

相關文章