表格是一种常用的标签, 表格结构, 做到能够合并单元格.
表格的属性:
属性名 | 说明 |
---|---|
border | 设置表格的边框 |
cellspacing | 设置单元格与单元格边框之间的空白间距 |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 |
align | 设置表格在网页中的水平对齐方式 |
width | 设置表格的宽度 |
height | 设置表格的高度 |
如何创建表格:
- <table>
- <tr>
- <td></td>
- </tr>
- </table>
表格用 table,tr 代表表格中的一行, 必须在 table 标签中, td 用于表示表格中的单元格,<tr></tr > 表格中的一行.
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- </style>
- </head>
- <body>
- <table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
- <caption>
- 个人信息表
- </caption>
- 表格标题
- <tr>
- <th>
- 姓名
- </th>
- <th>
- 性别
- </th>
- <th>
- 电话
- </th>
- </tr>
- <tr>
- <td>
- dashu
- </td>
- <td>
- 男
- </td>
- <td>
- 123
- </td>
- </tr>
- <tr>
- <td>
- dashucoding
- </td>
- <td>
- 男
- </td>
- <td>
- 123456
- </td>
- </tr>
- </table>
- </body>
- </HTML>
- <thead>
- </thead>
- 用于定义表格的头部
- <tbody>
- </tbody>
- 用于定义表格的主体
表格:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 表格
- </title>
- <style>
- /* 选择器 { 属性: 值; } */ th { color: blue; } td { font-size: 14px; } tr {
- height: 30px; }
- </style>
- </head>
- <body>
- <table border="1" cellpadding="0" cellspacing="0" width="550" align="center">
- <caption>
- <h3>
- </h3>
- </caption>
- <thead>
- <tr>
- <th>
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 1
- </td>
- </tr>
- <tr>
- <td>
- 1
- </td>
- </tr>
- <tr>
- <td>
- 1
- </td>
- </tr>
- <tr>
- <td>
- 1
- </td>
- </tr>
- <tr>
- <td>
- 1
- </td>
- </tr>
- <tr>
- <td>
- 1
- </td>
- </tr>
- <tr>
- <td>
- 1
- </td>
- </tr>
- </tbody>
- </table>
- </body>
- </HTML>
合并单元格:
跨行合并: rowspan
跨列合并: colspan
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <table width="400" height="100" border="1">
- <tr>
- <td>
- 123
- </td>
- <td>
- abc
- </td>
- <td>
- abc
- </td>
- </tr>
- <tr>
- <td colspan="2">
- 123
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- 123
- </td>
- <td>
- abc
- </td>
- <td>
- abc
- </td>
- </tr>
- </table>
- <table width="400" height="100" border="1">
- <tr>
- <td>
- 123
- </td>
- <td>
- abc
- </td>
- <td rowspan="3">
- abc
- </td>
- </tr>
- <tr>
- <td>
- 123
- </td>
- <td>
- 123
- </td>
- </tr>
- <tr>
- <td>
- 123
- </td>
- <td>
- abc
- </td>
- </tr>
- </table>
- </body>
- </HTML>
在表格中由行中的单元格组成, 没有列元素. 表达式由表单控件, 提示信息, 表单域组成.
input 输入控件:</input/> 但标签
// 表单
性别, 生日, 年月日, 所在地区, 婚姻状况, 学历, 月薪, 手机号, 昵称, 喜欢类型, 掌握介绍等.
属性 | 属性值 | 说明 |
---|---|---|
type | text | 单行文本输入框 |
type | password | 密码输入框 |
type | radio | 单选按钮 |
type | checkbox | 复选框 |
type | button | 普通按钮 |
type | submit | 提交按钮 |
type | reset | 重载按钮 |
type | image | 图形形式的提交按钮 |
type | file | 文件域 |
name | 用户自定义 | 控件名称 |
size | 正整数 | input 控件在页面中显示的宽度 |
value | 用户自定义 | 控件的默认文本值 |
checked | checked | 定义选择控制价默认被选择的项 |
'maxlength` | 正整数 | 控件允许输入的最多字符数 |
label 标签为 input 标签元素定义的标注.
- <label for="id">
- id
- </label>
- <input type="radio" name="sex" id="me" value="id">
textarea 控件 - 文本域
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
达叔小生: 往后余生, 唯独有你
You and me, we are family !
90 后帅气小伙, 良好的开发习惯; 独立思考的能力; 主动并且善于沟通
来源: http://www.jianshu.com/p/24fa43cef823