HTML表格與表單 學習誌03


Posted by RanmoLU on 2023-10-11

一、表格

(一)、tr屬性

<tr height/bgcolor="" align="center/left/right" valign="top/middle/bottom">
    <td>內容1</td>
    <td>內容2</td>
    <td>內容3</td>
</tr>`
  • height屬性可以用來增加特定行高度,但總高度固定下其他行會均分剩餘高度,另外tr內建沒有寬度屬性。
  • bgcoclor屬性用來調整特定行的背景色,且當table與tr同時使用bgcolor屬性時結果會呈現tr的color(子標籤屬性高於父標籤屬性)。
  • align=center/left/right>:水平對齊;valign=bottom/top/middle>:垂直對齊

(二)、td屬性

<table>
    <tr>
        <td width/height/bgcolor></td>
    </tr>
</table>
  • width屬性會更改同一所有單元格的寬度;height屬性會更改同一的所有單元格的高度
  • bgcolor屬性會更改單元格顏色
  • align/valign屬性會更改水平/垂直對齊位置

(其他表格屬性

  • 水平合併跨列;垂直合併跨行(千峰ep023)
  • 表格標題標籤 為下的子標籤。
  • 表格的頭部區域表格的身體區域表格的尾部區域,皆為的子標籤又為的父標籤。
    <table>
      <caption>表格標題</caption>
      <thead>
          <tr>
              <td width/height/bgcolor></td>
              <td>頭部區域</td>
              <td></td>
          </tr>
      </thead>
      <tbody>
          <td>身體區域</td>
      </tbody>
      <tfoot>
          <td>尾部區域</td>
      </tfoot>
    </table>
    

    二、表單

    (一)、表單的創建(千峰ep30)

    <form>
        <input type="text/passord"/> //設成password時,使用者輸入時會看到很多「*」
        <input type="file">
        <textarea cols="20" row="5"></textarea> //cols跟row用來設定顯示多行框的大小
        <label for="man">男</label>            
        //要製作單選則各選項的name必須設成同一組,要有「焦點」則需用label配合選項的id設定。
        <input type="radio" name="sex" id="man"> 
        <label for="woman">女</label>
        <input type="radio" name="sex" id="woman">
        <h4>最愛的水果</h4>
        <input type="checkbox" checked>蘋果    //多選的設置(checked適用於設定預設選項)
        <input type="checkbox">西瓜
        <!-- -->下拉菜單
        <slect>                         //下拉菜單的設置(slected適用於設定預設選項)
            <option slected>選項一</option>
            <option>選項二</option>
            <option>選項三</option>
        </slect>
    </form>
    

    下拉菜單emmt語法:option{199$}9會自動列出1991-1999的選項
    複製當前code並新增:alt+shfit按鍵盤↓;alt+滑鼠=同時多個位置輸入同文字限讀功能

    (二)、表單的分組

    <form>
        <fieldset>          
            <legend>基本訊息</legend>   
            稱呼:<input>
            年齡:<input>
        </fieldset>
    
        <fieldset>
            <legend>保密訊息</legend>
            宗教:<input>
            喜好:<input>
        </fieldset>
    </form>
    

    (三)、按鈕的種類與創建

    <p>註冊</p>
    帳號:<input>
    <br>
    密碼:<input>
    <br>
    <input typr="submit"> //製作「提交」的按鈕,設置value屬性能為按鈕命名
    <input type="reset" > //製作「重置」的按鈕
    <input type="button"> //製作「普通」~~沒用~~的按鈕
    

#學習日記







Related Posts

VS code 段落過長怎麼辦?

VS code 段落過長怎麼辦?

簡明 APCS 大學程式設計先修檢測入門教學

簡明 APCS 大學程式設計先修檢測入門教學

工程師有兩種:做完跟做好的分別

工程師有兩種:做完跟做好的分別


Comments