# table标签的使用 ## 需求 - 在网页中表格是经常见到的数据呈现形式 - 在网页中获取用户的输入也是经常会使用的 - 本次的任务就是大家通过自学的方式掌握`table`标签和`input` 标签的使用 - **最终完成一个信息收集网页的开发** ## 参考代码 - 效果 ![image-20241217165806798](./02.[任务书]table标签的使用/image-20241217165806798.png) - 代码 ```html Document

大学生信息收集

姓名	性别	照片
年级	专业	照片
手机号码
联系地址

``` >作业12.1提交的内容 > >- 学习表格和表单，理解程序的运行逻辑 >- 程序运行成功的截图，单独发送给组长 # 表格 ## 表格基本结构一个基本的HTML表格由以下元素组成： - ``：定义表格的开始。 - ``：定义表格中的行。 - `

`：定义表格中的单元格。 ```html Document

序号	姓名	性别	爱好
1	张三	男	看书

``` 效果如下 ![image-20241217154445212](./02.[任务书]table标签的使用/image-20241217154445212.png) ## 表格的属性 - 宽度：width - 高度：height - 边框：border - 边框颜色：bordercolor - 背景颜色：bgcolor - 水平对齐：align=“left或right或center” - cellspacing=“单元格与单元格之间的间距” - cellpadding=“单元格与内容之间的空隙” 为了显示表格的框线，可以在`table`标签中加入如下属性 ```html ``` 效果如下 ![image-20241217155117054](./02.[任务书]table标签的使用/image-20241217155117054.png) 去除表格和单元格之间的空隙 ```html

``` 效果如下 ![image-20241217155423128](./02.[任务书]table标签的使用/image-20241217155423128.png) 使表格水平居中 ```html

``` 效果如下 ![image-20241217155606535](./02.[任务书]table标签的使用/image-20241217155606535.png) ## 行的属性 - 高度 height - 背景颜色 bgcolor - 文字水平对齐 align=“left 或 right 或 center” - 文字垂直对齐 valign=“top 或 middle 或 bottom” - 调整表格的行样式，修改第一行的背景色，并且设置文字水平对齐 ```html ``` 效果如下 ![image-20241217160036271](./02.[任务书]table标签的使用/image-20241217160036271.png) ## 列的属性 - 宽度 width - 高度 height - 背景颜色 bgcolor - 文字水平对齐 align=“left或right或center” - 文字垂直对齐 valign=“top或middle或bottom” - 调整表格的样式，将列的宽度进行适当的调整，注意！列的宽度只需要改动第一列即可。 ```html

序号	姓名	性别	爱好
1	张三	男	看书

``` 效果如下 ![image-20241217160630428](./02.[任务书]table标签的使用/image-20241217160630428.png) # 输入标签 ``：输入标签用于接收用户输入。 ```html ``` **属性：** - **`type="属性值"`**：文本类型。属性值可以是： - `text`（默认） - `password`：密码类型 - `radio`：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。 - `checkbox`：多选按钮，**name 属性值相同的按钮**作为一组进行选择。 - `checked`：将单选按钮或多选按钮默认处于选中状态。当``标签设置为`type="radio"`或者`type=checkbox`时，可以用这个属性。属性值也是checked，可以省略。 - `hidden`：隐藏框，在表单中包含不希望用户看见的信息 - `button`：普通按钮，结合js代码进行使用。 - `submit`：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。 - `reset`：重置按钮，清空当前表单的内容，并设置为最初的默认值 - `image`：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。 - `file`：文件选择框。提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。 - **`value="内容"`**：文本框里的默认内容（已经被填好了的） - `size="50"`：表示文本框内可以显示**五十个字符**。一个英文或一个中文都算一个字符。注意**size属性值的单位不是像素哦**。 - `readonly`：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。 - `disabled`：文本框只读，不能编辑，光标点不进去。属性值可以不写。 > 备注：HTML5中，input的类型又增加了很多（比如date、color，我们会在 html5 中讲到）。 **举例**： ```html ``` 效果： ![image-20241217161358523](./02.[任务书]table标签的使用/image-20241217161358523.png) 注意，多个个单选框的input标签中，name 的属性值可以相同，但是 **id 的属性值必须是唯一的**。我们知道，html的标签中，id的属性值是唯一的。 **四种按钮的举例**： ```html ``` 效果如下 ![image-20241217161534542](./02.[任务书]table标签的使用/image-20241217161534542.png) `` 数据列表 ```html ``` 上方代码中，input里的list属性和 datalist 进行了绑定。效果 ![image-20241217165115882](./02.[任务书]table标签的使用/image-20241217165115882.png) ### ``标签里面的每一项用`

``` 效果： ![image-20241217164803505](./02.[任务书]table标签的使用/image-20241217164803505.png)