HTML表格与表单

表格标签table
tr 代表一行 td 代表一列,以下是一个一行两列的标签

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

tr不能设置宽度,其宽度和表格一样宽,但可以指定高度
td可以设置宽高,但宽度不能超过表格

table里的几个属性
-align:表格自身的水平位置,如果align放在tr或td上,改变的是文本水平对齐方式
-width:表格的宽度
-height:表格的高度
-bgcolor:表格的背景颜色
-bordercolor:表格的边框颜色
-cellspacing:单元格与单元格之间的缝隙,为0时,没有缝隙
-cellpadding:单元格的内边距,即文本与单元格的距离
例:

<table border="1" cellspacing="0" bgcolor="yellow">
<tr align="center">
<td>第一</td>
<td>第二</td>
<td>第三</td>
<td>第四</td>
</tr>
 <tr align="right">
        <td>第五</td>
        <td>第六</td>
        <td>第七</td>
        <td>第八</td>
    </tr>
</table>

两行四列的表格

单元格的合并

-行合并 rowspan
-列合并 colspan
例:

<table border="1" width="400" height="200" cellspacing="0">
    <tr>
        <td colspan="3">合并3列</td>
        <td></td>
        <td></td>

    </tr>
    <tr>
        <td rowspan="2">合并两行</td>
        <td></td>
        <td></td>
        <td colspan="2">合并两列</td>

    </tr>
    <tr>

        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td width="80"></td>
        <td width="80"></td>
        <td width="80"></td>
        <td width="80"></td>
        <td></td>
    </tr>
</table>

在这里插入图片描述

例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table border="1" width="400" height="300">
    <tr>
        <td rowspan="6"></td>
        <td rowspan="3"></td>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="3"></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

表单元素form
两个属性
-action:指定了当前表单想要提交的目的地(将要把填写的内容发送给谁)
-method:提交表单采用的方法 get,post

<form action="" method=””></form>

表单元素

1.文本框

<form action="" method=””>
<input type="text" placeholder="这是一个文本框"/>
</form>

结果如下
在这里插入图片描述

2.密码框 输入文本后会被▪取代

<input type="password" placeholder="这是一个密码框"/>


在这里插入图片描述

3.单选按钮

 <input type="radio" name="sex" id="m" checked/><label for="m">男</label>
    <input type="radio" name="sex" id="f"/><label for="f">女</label>

其中的checked代表默认选项
label:点文字也能选
结果如下
在这里插入图片描述
在这里插入图片描述

4.多选按钮

 <input type="checkbox" name="书" id="r" checked/><label for="r">人间失格</label>
    <input type="checkbox" name="书" id="a" /><label for="a">暗网</label>
    <input type="checkbox" name="书" id="x" /><label for="x">兄弟</label>
    <input type="checkbox" name="书" id="h" checked /><label for="h" >活着</label>

结果如下在这里插入图片描述

5.重置按钮

<input type="reset" value="重置"/>

结果如下
在这里插入图片描述

6.浏览文件

  <input type="file"  />

结果如下
在这里插入图片描述

7.提交按钮

 <input type="submit" value="我要提交"/>

结果如下
在这里插入图片描述

8.下拉框

 <select >
        <option >---请选择---</option>
            <option >青岛</option>
            <option selected>威海</option>
            <option >济南</option>
            <option >上海</option>
            <option selected>北京</option>
            <option >武汉</option>
            <option >广州</option>
    </select>

结果如下
在这里插入图片描述
在这里插入图片描述

9.多行文本输入框

 <textarea name="" id="" cols="30" rows="10" placeholder="这是一个多行文本输入框"></textarea>

结果如下
在这里插入图片描述
10.按钮

 <input type="button" value="这是一个按钮"/>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43885459/article/details/84671271