表格标签和表单标签

表格标签和表单标签

表格标签

表格基本骨架

 <table>
        <tr>
            <td></td>
        </tr>
    </table>

表格结构标签

<table>
    	<caption>表格标题</caption>
        <thead></thead>
        <tbody></tbody>
        <tfoot></tfoot>
    </table>

表格相关属性

表格的基本属性：

• border–设置表格边框
• align–设置表格显示方式，参数为：left center right
• cellspacing–设置单元格与单元格之间的距离
• cellpadding–设置单元格与单元格内容之间的距离

通过CSS样式设置表格相关属性：

• border-callapse:callapse 和cellspacing有一定的区别，其中cellspacing是使两个单元格紧贴，两个单元格之间的边框线是两个边框线之和，而border-callapse:callapse直接使两个表格的边框线重合
• width:设置表格宽度
• height：设置表格高度

合并单元格

1. 明确是跨行合并还是跨列合并，rowspan–跨行合并，colspan–跨列合并；

2. 找需要合并的目标单元格，通常是给需要跨行和跨列的第一个单元格添加rowspan，colspan属性，属性值等于需要合并的单元格个数；

3. 删除多余单元格；

 <table border="1">
        <tr>
            <td>时间</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
        </tr>
        <tr>
            <td>上午</td>
            <td colspan="6">前端课程</td>
            <td rowspan="3">休息</td>
        </tr>
        <tr>
            <td>下午</td>
            <td colspan="6">前端课程</td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td>晚自习</td>
            <td colspan="6">自习</td>
            <!-- <td></td> -->
        </tr>
    </table>

表单标签

表单的作用是收集用户的信息，提交给服务器，所有的表单元素都要包裹在标签中，action属性：指定服务器的地址；method属性：指定提交信息的方式–get/post.

		<form>
            <input type="xxx" placeholder="请输入用户名">
        </form>

表单元素

  <input type="" value="" placeholder="占位信息">

type类型

• text：文本框
• password:密码框
• radio：单选按钮 需要设置相同的name属性值直线单选 如果添加checked默认选中单选按钮
• checkbox：复选框 如果添加checked默认选中复选框
• button：普通按钮
• submit：提交按钮（会刷新页面）
• reset：重置按钮

下拉框

• select:定义下拉框
• optgroup:定义下拉框中的选项组
• option：定义下拉框中的选项
• value属性不在页面显示

<form>
      <select>

    <optgroup>

      <option></option>

      ...

    </optgroup>

    <optgroup>

      <option></option>

     ...

   </optgroup>

  </select>
</form>

文本域

当用户需要输入较多的内容时，文本标签已不能满足我们的需求，此时，我们需要标签

cols:表示每行中的字符数

rows:显示的行数

<form>
	<textarea cols="50" rows="5">
    文本内容...
    </textarea>
</form>

<style>
        /* 禁止用户改变文本域的大小 */
        textarea{
            resize: none;
        }
    </style>

每天记录一点点…