1. 程式人生 > >表格和表單

表格和表單

radio 最大 play 無法 utf 打開方式 新窗口 doc -a

表格是一個組合標簽,用來布局,兼容性好;現在布局思路大多數是div+Css。

  對於表格標簽做了一下概述,認識一下。表格的頭部<thead></thead,和<tfoot></tfoot>可以省略,主要樣式如下

  

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style>
        table{
        width:300px;
        background-color:
gray; border:1px solid black; text-align:center; } </style> </head> <body> <table> <tr> <th>星期四</th> <th>星期五</th> <th>星期六</th> </
tr> <tr> <td>軟件文檔寫作</td> <td>微視頻制作</td> <td>期末考試</td> </tr> <tr> <td>軟件文檔寫作</td> <td>微視頻制作</td> <
td>期末考試</td> </tr> </table> </body> </html>

  <tr></tr>表格的行,<td></td>表格的單元格。

  表格標簽類型及特性: 

  技術分享圖片

  

  

  1,單元格會默認平分整個table寬度;

  2,th的內容默認加粗,並且水平垂直都居中;

  3,td的內容默認不加粗,並且垂直居中;

  4,table的寬度決定整個表格的寬度,如果td,th,設置的總寬度比table的寬度大,不起作用;

  5,表格的同一列繼承最大寬度(th,td最好都設置上寬度);

  6,表格的同一行繼承最大高度(th,td最好都設置上高度);

  特性應用:當文字特別多,不好控制高度,可以使文字垂直居中

  <div>

    <p>特別多文字。。。</p>

  </div>

  可以使div{display:table;}

    p{display:table-cell;vertical-align:middle;}

  合並單元格:

    

<table>
            <tr>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
            </tr>
            <tr>
                <td  colspan="2">軟件文檔寫作</td>
                <!-- <td>微視頻制作</td> -->
                <td rowspan="2">期末考試</td>
            </tr>
            <tr>
                <td>軟件文檔寫作</td>
                <td>微視頻制作</td>
                <!-- <td>期末考試</td> -->
            </tr>
        </table>

  效果如圖:

  技術分享圖片

  colspan="數值"

  rowspan="數值“

  數值對應需要合並的單元格數量,被合並的單元格要刪除,否則會多出一個單元格。

表單和控件

  <form action="需要傳送的地址" method="傳送的方式" target="窗口打開方式"></form>

  method兩種方式:get:在地址欄做內容的拼接,用戶可以看的到;post:把表單元素裏面的內容做拼接,並且打包傳送的action的地址,看不到 。

  target:

  _blank:在新窗口打開

  _self:在當前窗口打開

  input的type類型:

    文本text;密碼password;單選radio;多選checkbox;文件上傳file;按鈕button;隱藏hidden;充值hidden;提交sunmit

    imput裏面的標簽值都體現在value中

    name屬性一定要設置,如果不設置,無法實現上傳

    兩種的lable屬性:

    1,<lable >

    吃<input type="checkbox" value="吃" name="xingqu">

</lable>

    2,

    <lable for="he" >吃</lable>

    <input type="checkbox" value="吃" name="xingqu" id="he">

其他控件

  <select name="diqu">

  <option value="安徽">安徽</option>

  </select>

  <textarea></textarea>

表格和表單