table

by 000dd

HTML

<html>
  <body>
    <header>
      <h1>高雄市公司各行政區家數及資本額(千元)</h1>
      <p>高雄市公司各行政區家數及資本額(千元)資料</p>
    </header>
    <table class='table-border'>
      <tr>
           
        <th>
          <div>主要欄位說明</div>
          *粗體欄位為資料標準欄位
       </th>
        <td>行政區、家數、資本額</td>
  
      </tr>
      <tr>
        <th>資料資源下載網址</th>
        <td>
          <div class="td-margin">          
            <a class="download" href = "https://data.kcg.gov.tw/dataset/4c187e12-ac17-4fd5-b63e-e29296388cf8/resource/e0960b77-154f-43af-ac6c-3dbaa6a387a1/download/companyccapital109-9.csv">CSV</a><span> <a class="buttom" href ="#">檢視資料</a> 高雄市公司各行政區家數及資本額(千元)-109年9月</span>
          </div>
          <div class="td-margin">        
            <a class="download" href = "https://data.kcg.gov.tw/dataset/4c187e12-ac17-4fd5-b63e-e29296388cf8/resource/8bb5c405-4260-47a4-bb84-a385dcfd528f/download/companyccapital.csv">CSV</a><span> <a class="buttom" href ="#">檢視資料</a> 高雄市公司各行政區家數及資本額(千元)-109年7月</span>
          </div>
          <div class="td-margin">
            <a class="download" href = "https://data.kcg.gov.tw/dataset/4c187e12-ac17-4fd5-b63e-e29296388cf8/resource/bd11cdd5-4af9-4d01-9de6-ec3d1f17a62e/download/companyccapital109-8.csv">CSV</a><span> <a class="buttom" href ="#">檢視資料</a> 高雄市公司各行政區家數及資本額(千元)-109年8月</span>
          </div>
        </td>
      </tr>
      <tr>
        <th>提供機關</th>
        <td><a class="buttom" href='https://data.gov.tw/datasets/search?qs=20162'>高雄市政府經濟發展局</a></td>
      </tr>
      <tr>
        <th>提供機關聯絡人姓名</th>
        <td>曾煥欽 ((07)3368333#3186)</td>
      </tr>
      <tr>
        <th>更新頻率</th>
        <td>不定期更新</td>
      </tr>
      <tr>
        <th>授權方式</th>
        <td>政府資料開放授權條款-第1版</td>
      </tr>
      <tr>
        <th>計費方式</th>
        <td>免費</td>
      </tr>
      <tr>
        <th>上架日期</th>
        <td>2020-07-03</td>
      </tr>
      <tr>
        <th>資料集上架方式</th>
        <td>系統介接程式</td>
      </tr>
      <tr>
        <th>詮釋資料更新時間</th>
       ...

CSS

*{
  padding: 0;
  margin: 0;
}
body{
  font-family: "Noto Sans TC","helvatica","Arial",sans-serif,"微軟正黑體";
}
header{
  margin: 30px;
}
h1{
  text-align: center;
}
p{
  text-align: center;
}
a{
  text-decoration: none;
}
.table-border{
  border: 1px solid #dcdfe6;
  border-collapse: collapse;
}
tr{
  border-bottom: 1px solid #dcdfe6;
}
th{
  text-align: left;
  width: 160px;
  background-color: #e9edf2;
  padding: 10px;
}
td{
  padding: 10px;
  border-bottom: 1px solid #dcdfe6;
  line-height: 1.5;
}
.td-margin{
  line-height: 1.8;
  margin-bottom: 20px;
}
.download{
  color: #005f8f;
  background: #c0dae7;
  border-radius: 3px;
  padding: 7px 15px;
  
}
.buttom{
  color: #0079b7;
}