Chapter 13 建立表格

• HTML

<table>
      <caption>/*------标题，多数情况默认显示在表格上方*/
        The cities I visited on my
        Segway'n USA travels
      </caption>
     
      <tr>/*------table row 新列*/
        <th>City</th>/*-------table head 表头*/
        <th>Date</th>
        <th>Temperature</th>
        <th>Altitude</th>
        <th>Population</th>
        <th>Diner Rating</th>
      </tr>
      
      <tr>
        <td>Walla Walla, WA</td>/*------table data 数据单元格*/
        <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>
        <td rowspan="2">Truth or Consequences, NM</td>/*------跨两行，跨多列用colspan*/
        <td class="center">August 9th</td>
        <td class="center">93</td>
        <td rowspan="2" class="right">4,242 ft</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>
              <th>Tess</th>
              <td>5/5</td>
            </tr>
            <tr>
              <th>Tony</th>
              <td>4/5</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

• CSS

table {
  margin-left:      20px;
  margin-right:     20px;
  border:           thin solid black;
  caption-side:     bottom;
  border-collapse:  collapse;/*------消除单元格间隙*/
}

table table th {
  background-color: white;
}

td, th {
  border:           thin dotted gray;
  padding:          5px;
}

th {
  background-color: #cc6600;
}

.cellcolor {
  background-color: #fcba7a;
}


caption {
  font-style:       italic;
  padding-top:      8px;
}

.center {
  text-align:       center;
}

.right {
  text-align:       right;
}