表格与表单

最新推荐文章于 2024-07-05 14:02:55 发布

2301_740097890

最新推荐文章于 2024-07-05 14:02:55 发布

阅读量135

点赞数

文章标签： html dreamweaver css

本文链接：https://blog.csdn.net/2301_76892837/article/details/129524937

版权

<!--

表格与表单：

表格：

主要用来向用户展示信息

快速创建表格：table>tr*3>td{$}*3 然后tab键快速补全

语法：

<table>---------------表格

<tr>--------------表格行

<td></td>-----单元格

</tr>

</table>

表格的标签属性：（全部写在标签里面）

1、表格宽度：width

2、表格高度：height

宽高取值可以是数值+单位（这种情况下可以不写单位px，默认但我诶就是px）

单位也可以是百分数：50%

3、背景颜色：bgcolor

4、设置边框：border

5、边框颜色bordercolor

6、水平对其方式：align

取值：left/right/center

7、单元格与单元格之间间距：cellspacing

8、内容与单元格之间间距；cellpadding

9、表格外面显示线：

frame：

取值：

box-------外面四周显示

above-----外面上面的线

below-----外面下面的线

lhs-------外面左侧的线

rhs-------外面右侧的线

10、表格里面的线如何显示：

rules：

取值：

rows-------显示水平方向的线

cols-------显示垂直方向的线

表格行标签属性：

1、行的高度：height

2、行的背景颜色：bgcolor

3、一行内文本水平对齐方式：

align

取值：left/center/right

4、一行内文本垂直对齐方式

valign

取值：top/middle/bottom

表格单元格标签属性：

1、宽度：width

2、高度：height

3、背景颜色：bgcolor

4、文本水平对齐方式：

align：

取值：left/center/right

5、文本垂直对齐方式：

valign

取值：top/middle/bottom

重要属性：(********************)

* 6、合并单元格：

合并行：rowspan=“数值”

合并列：colspan=“数值”

表格的css属性：

table上

1、宽度：width

2、高度：height

3、边框：border：1px solid red;

4、单元格与单元格间距：border-spacing:数值+单位

5、合并单元格边框位细线：border-collapse：collapse（常用）

6、表格布局算法：

table-layout：

取值：

auto：单元格宽度随内容而变化

fixed：单元格宽度固定不变

td上：

1、边框：border：1px solid red;

2、单元格与内容间距：padding：

3、隐藏内容为空单元格：empty-cells：hide

表格中的其他标签：

1、表格标题标签

表格标题显示位置：caption-size

取值：top/bottom

2、行分组标签

表格头：<thead></thead>

表格头中包裹th标签，默认样式：文本水平居中，并且有加粗效果

表格包裹td标签，无默认样式

表格主体：<tbody></tbody>

表格尾部：<tfoot></tfoot>

注意：一个表格中只能有一个表格头和一个表格尾

3、表格中的列分组标签

span：表格将几列划分成一组

表单：

作用：用来收集用户信息，提交到后台。

语法:<form></form>

input type属性

1、text----------文本输入框

2、password------密码框

3、submit ------提交按钮

4、reset ------重置按钮

5、button------普通按钮

6、file--------上传文件按钮

7、hidden------隐藏域（用来上传不被用户知晓的信息）

8、radio-------单选按钮

默认状态下，单选可以实现共选效果，如果想要实现单选效果，只需要给相同的radio添加name属性且name属性取值相同

默认被选中状态：checked

9、checkbox------复选

默认选中：checked

单选和复选，为了提高用户体验，点击文字实现选中效果，需要借助label标签来实现

  <form action="">
        用户名： <input type="text"> <br>
        密码： <input type="password"> <br>
        上传文件： <input type="file"> <br>
        隐藏域： <input type="hidden" value="000"> <br>
        性别： 
            <input type="radio" name="sex" checked id="boy">
            <label for="boy">男</label>
            
            <input type="radio" name="sex" id="girl">
            <label for="girl">女 </label>
            <br>
        婚否：
            <input type="radio" name="merry">已婚
            <input type="radio" name="merry" checked>未婚 <br>
        爱好：
            <input type="checkbox" id="study">
            <label for="study">学习</label>
            
            <input type="checkbox" checked>干饭
            <input type="checkbox">睡觉
            <input type="checkbox">看美女 <br>
        <input type="submit">
        <input type="reset">
        <input type="button" value="普通按钮">
    </form>

select---------下拉列表

需要配合option标签一起使用

<form action="">
        城市： 
        <select name="" id="" multiple size="1">
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="" selected>深圳</option>
            <option value="">合肥</option>
            <option value="">厦门</option>
            <option value="">香港</option>
            <option value="">新疆</option>
        </select>
    </form>

设置默认被选中状态：在option上面添加selected

设置多选，在select标签上面添加multiple属性（默认显示4个下拉列表项）

设置下拉列表显示下拉列表项个数，在select上面添加size属性