(9)HTML5-表格与窗体

原创 2016年08月30日 17:47:23

在纯粹只有HTML5语句的时候,可以简单地使用<table>,<th>,<tr>,<td>来构造表格的结构。

<table>标签:表示整个表格的范围

<tr>标签:表示表格中一行的单元格

<th>标签:表示表格中的一列的单元格

<td>标签:表示表格中的一个基本单元格


HTML文件


<table border="1">
    <tr>
        <th>科目</th>
        <th>小明</th>
        <th>小花</th>
    </tr>
    <tr>
        <td>语文</td>
        <td>55分</td>
        <td>100分</td>
    </tr>
     <tr>
        <td>英语</td>
        <td>30分</td>
        <td>92分</td>
    </tr>
     <tr>
        <td>数学</td>
        <td>99分</td>
        <td>10分</td>
    </tr>
</table>

加入CSS控制表格

运用我们在前面所学过的图文属性,为表格加上不同的装扮。



窗体

窗体是网页中频繁使用的互动元素,主要担任搜集用户信息并存储至后台数据库的角色。在窗体中会会使用到HTML标签包括<form>,<input>,<select>,<textarea>等。

<form>标签:标记窗口的结构范围

<input>标签:调用一个输入字段

<select>标签:调用一个下拉式选单字段

<textarea>标签:调用一个多行输入的文字栏

HTML文件


<form method="post">
    <p>姓名:<br><input type="text" name="name" id="name"></p>
    <p>居住城市:<br>
    <select name="city" id="city">
        <option value="Taipei">台北市</option>
        <option value="Taichung">台中市</option>
        <option value="Kaohsiung">高雄市</option>
    </select>
    </p>
    <p>自我介绍:<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea>></p>
    <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit">
    </p>
</form>

加入CSS样式后:


 <style type="text/css">
        form{
            border:5px solid #696969;
            width:300px;
            padding:3px 6px 3px 6px;
            margin:0px;
            font:16px Arial;
        }
        select,input,textarea{
            color:#4682B4;
            background-color:#00BFFF;
            border:1px solid #4682B4;
        }
        select {
            width:80px;
        }
        textarea{
            width:200px;
            height:40px;
        }
    </style>



版权声明:本文为博主原创文章,转载必须声明出处,thank。

HTML5_样式,链接和表格

  • 2016年02月03日 21:22
  • 19KB
  • 下载

web2.0时代乃至html5时代 一像素边框表格的几种实现方法

简写文章,以后详加阐述。。 table 属性:

Html5+Css3实现简单表格排版

1.html5实现初步布局 CS 142 Project 1, Problem 1 --> --> Item Manufacturer Size Unit Price Qua...
  • isGt93
  • isGt93
  • 2015年10月02日 17:42
  • 515

HTML5权威指南笔记:11-表格元素

1 生成基本的表格 table元素 元素类型 流 允许具有的父元素 任何可以包含流元素的元素 局部属性 border 内容 caption 、colgroup ...

初学Html5+CSS之表格添加用户+删除用户+修改数据+删除全部+批量删除+查询数据+内容判断

效果图 需要导入的包 代码如下 select{ width: 100px; }...

html5 表格使用基础

在 HTML 4.01 中,不赞成使用 "align" 和 "bgcolor" 属性。 在 HTML5 中,不支持 标签的任何属性。...

html5中表格的各种属性以及应用详细介绍

第七章 表格的应用 1   认识表格 1、 表格的构成:表单控件、提示信息、表单域 2、 创建表单:  中的所有内容都会被提交给服务器 各种表单控件   2   表单属性 1、 ...

表格 -- HTML5

HTML表格,

HTML5表格基础语法

1.表格的基本格式  2.标签下的常用属性 3.标签下的边框设置  4.标签下的常用属性      5.拆分与合并单元格  6.表格的结构化、直列化、标题     ...

html5表格元素

效果: 代码: 表格元素 ///行 张三///单元格 男 未婚 李四 女 已婚 ...
  • a716121
  • a716121
  • 2016年08月02日 12:04
  • 232
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:(9)HTML5-表格与窗体
举报原因:
原因补充:

(最多只允许输入30个字)