第四課作業(表格)

https://data.taipei/dataset/detail/preview?id=7cef6d4e-f69f-47e7-a966-c8b9ccd7685b&rid=b6853903-9201-47a5-a799-561145da41d2

by KitHuang

HTML

<h1>
107年度友善廁所名單
</h1>

<table>  
<tr>  
    <th>標號</th>
    <th>夜市名稱</th>
    <th>店家名稱</th>
</tr>  
<tr>  
    <td>1</td>
    <td>寧夏夜市</td>
    <td>鬍鬚張美食文化館</td>
</tr>  
<tr>  
    <td>2</td>
    <td>寧夏夜市</td>
    <td>富嘉文創商行</td>
</tr>  
<tr>  
    <td>3</td>
    <td>寧夏夜市</td>
    <td>統一超商(7-11):鑫寧門市</td>
</tr>

<tr>  
    <td>4</td>
    <td>寧夏夜市</td>
    <td>雙連市場</td>
</tr>  
<tr>  
    <td>5</td>
    <td>延三夜市</td>
    <td>延三海鮮炭烤</td>
</tr>  
<tr>  
    <td>6</td>
    <td>延三夜市</td>
    <td>延三新營人沙茶牛肉</td>
</tr>  
<tr>  
    <td>7</td>
    <td>延三夜市</td>
    <td>統一超商(7-11):延年門市</td>
</tr>  
<tr>  
    <td>8</td>
    <td>大龍夜市</td>
    <td>統一超商(7-11):保聖門市</td>
</tr>  
<tr>  
    <td>9</td>
    <td>饒河街夜市</td>
    <td>幻多奇遊樂園  (奇樂多歡樂天地)</td>
</tr>  
<tr>  
    <td>10</td>
    <td>饒河街夜市</td>
    <td>竹之坊藝品店</td>
</tr> 
</table>

CSS

h1{text-align :center;}

table{margin:50px;
      color: #333;
      width:640px;
      border-collapse: collapse; 
      border-spacing: 0;
      font-family: Helvetica, Arial, sans-serif;}

td, th { border: 1px solid #CCC;
         height: 30px;}

th{background:#F3F3F3;
   font-weight: bold;}
   
td{ background: #FAFAFA; 
    text-align: center;}
    
tr:nth-child(even) td { background: #F1F1F1; }   
   
tr:nth-child(odd) td { background: #FEFEFE; } 

tr td:hover { background: #666; color: red; }