設計表格" href="http://www.camdemy.com/oembed/?url=http%3A%2F%2Fwww.camdemy.com%2Fmedia%2F5935&format=json"/> 設計表格" href="http://www.camdemy.com/oembed/?url=http%3A%2F%2Fwww.camdemy.com%2Fmedia%2F5935&format=xml"/>
    發表於 2013-02
    4,439 觀看次數
    • 00:00
      1. table
    • 00:03
      2. 基本結構說明
    • 01:54
      3. 動手操作
    • 02:26
      4. style 樣式設定
    • 04:03
      5. 樣式設計的參考網站
    • 04:40
      6. 儲存格合併
    • 05:56
      7. 應該避免使用的屬性
    • 06:54
      8. 其他教學的補充說明
    用 <table> 設計表格
    以下為表格的基本結構範例
    102 年度 camdemy 課表
    開課日期 課程名稱 授課老師
    2/1 HTML 基礎 (標籤、CSS) 蘇德宙
    3/1 JavaScript 王佑芳
    html 的原始碼如下:
    <style>
      .courseTable {width:100%; border:1px solid #ccc}
      .courseTable th {background:#eeeeee}
      .courseTable td {background:#f8f8f8}
    </style>
    <table class="courseTable">
      <caption>102 年度 camdemy 課表</caption>
      <tbody>
        <tr>
          <th>開課日期
          <th>課程名稱
          <th>授課老師
        <tr>
          <th>2/1
          <td>HTML 基礎 (標籤、CSS)
          <td>蘇德宙
        <tr>
          <th>3/1
          <td>JavaScript
          <td>王佑芳
      </tbody>
    </table>
    1.
    html 原始碼說明
    7: table,表格元素
    8: caption描述整個表格的標題
    9: tbody,表格內容,除了讓表格結構更清晰外,常用來將 row 分組 (方便 js 控制),但可以省略,直接寫 tr
    10: tr,table row - 定義表格的一列 (row),tr 裡面包含多個 th 或 td
    11: th,table header - 儲存格的標題,通常瀏覽器會以置中、粗體的方式顯示
    15: td,table header - 儲存格

    * tbody, tr, th, td 都可以省略結束標籤
    2.
    表格的樣式設計
    透過 css 的設計,表格也可以很有設計感,上網查一下 "table style css" 會有驚喜的! 例如:
    3.
    儲存格合併
    使用 colspan / rowspan,例如
    <td colspan="2"> 會在該列 (row) 中,與下一個 column 合併成一個
    同樣的,rowspan 則會在該行 (column) 中合併多個 row 儲存格
    4.
    儲存格寬度的設定
    要以行 (column) 為單位設定,利用 css style 中的 width 設定
    沒有設定寬度的 column,系統會自動依據內容調整
    注意: 傳統的 width 屬性已經在新的 html5 不支援,請用 css style 設定
    5.
    要特別注意的事情
    a. 舊語法不建議使用
    過去大家很喜歡使用 border="0" 或 align 等屬性,其實,在新的 html5 中已經不支援囉。
    替代的寫法請參考
    b. <colgroup> 可能不支援
    雖然 colgroup 設定同一個 col 的屬性很方便,不用每一個 td 分別設
    但並不是每個瀏覽器都支援得很好喔
    1. 
    訪客如要回應,請先 登入
      使用筆記功能,請先 登入
      發表時間 :
      2013-02-24 23:18:09 ( 2013-02)
      觀看次數 :
      4,439
      發表人 :
      QR Code :