表格作用:
存在即是合理的. 表格的现在还是较为常用的一种标签, 但不是用来布局, 常见显示, 展示表格式数据.
因为它可以让数据显示的非常的规整, 可读性非常好.
特别是后台展示数据的时候表格运用是否熟练就显得很重要, 一个清爽简约的表格能够把繁杂的数据表现得很有条理, 虽然 div 布局也可以做到, 但是总没有表格来得方便
1. 创建表格
在 html 网页中, 要想创建表格, 就需要使用表格相关的标签.
创建表格的基本语法:
- <table>
- <tr>
- <td > 单元格内的文字 </td>
- ...
- </tr>
- ...
- </table>
在上面的语法中包含基本的三对 HTML 标签, 分别为 table,tr,td, 他们是创建表格的基本标签, 缺一不可, 下面对他们进行具体地解释
table 用于定义一个表格标签.
tr 标签 用于定义表格中的行, 必须嵌套在 table 标签中.
td 用于定义表格中的单元格, 必须嵌套在 < tr></tr > 标签中.
字母 td 指表格数据 (table data), 即数据单元格的内容, 现在我们明白, 表格最合适的地方就是用来存储数据的.
2. 表格属性
表格有部分属性我们不常用, 这里重点记住 cellspacing , cellpadding.
属性名 | 含义 | 常用属性值 |
border | 设置表格的边框 (默认 border="0" 无边框) | 像素值 |
cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值 (默认为 2 像素) |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值 (默认为 1 像素) |
width | 设置表格的宽度 | 像素值 |
height | 设置表格的高度 | 像素值 |
align | 设置表格在网页中的水平对齐方式 | left、center、right |
我们经常有个说法, 是三参为 0, 平时开发的我们这三个参数 border cellpadding cellspacing 为 0
- <table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
- <tr> <th > 姓名 </th> <th > 性别 </th> <th > 年龄 </th> </tr>
- <tr> <td > 刘德华 </td> <td > 男 </td> <td>55</td> </tr>
- <tr> <td > 郭富城 </td> <td > 男 </td> <td>52</td> </tr>
- <tr> <td > 张学友 </td> <td > 男 </td> <td>58</td> </tr>
- <tr> <td > 黎明 </td> <td > 男 </td> <td>18</td> </tr>
- <tr> <td > 刘晓庆 </td> <td > 女 </td> <td>63</td> </tr>
- </table>
3. 表头单元格标签 th
作用: 一般表头单元格位于表格的第一行或第一列, 并且文本加粗居中
语法: 只需用表头标签 < th></th > 替代相应的单元格标签 < td></td > 即可.
- <table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
- <tr>
- <th > 姓名 </th>
- <th > 性别 </th>
- <th > 电话 </th>
- </tr>
- <tr>
- <td > 小王 </td>
- <td > 女 </td>
- <td>110</td>
- </tr>
- <tr>
- <td > 小明 </td>
- <td > 男 </td>
- <td>120</td>
- </tr>
- </table>
4. 表格标题
定义和用法
- <table>
- <caption > 我是表格标题 </caption>
- </table>
注意:
caption 元素定义表格标题, 通常这个标题会被居中且显示于表格之上.
caption 标签必须紧随 table 标签之后.
这个标签只存在 表格里面才有意义.
5. 合并单元格
合并单元格的 2 种方式
跨行合并: rowspan="合并单元格的个数"
跨列合并: colspan="合并单元格的个数"
合并单元格的顺序: 合并的顺序我们按照 先上 后下 先左 后右 的顺序
- <thead>
- </thead>
- : 用于定义表格的头部. 用来放标题之类的东西.
- <thead>
- 内部必须拥有
- <tr>
- 标签!
- <tbody>
- </tbody>
- : 用于定义表格的主体. 放数据本体 .
- <tfoot>
- </tfoot>
- 放表格的脚注之类.
- <ul>
- <li > 列表项 1</li>
- <li > 列表项 2</li>
- <li > 列表项 3</li>
- ......
- </ul>
- <ol>
- <li > 列表项 1</li>
- <li > 列表项 2</li>
- <li > 列表项 3</li>
- ......
- </ol>
- <dl>
- <dt > 名词 1</dt>
- <dd > 名词 1 解释 1</dd>
- <dd > 名词 1 解释 2</dd>
- ...
- <dt > 名词 2</dt>
- <dd > 名词 2 解释 1</dd>
- <dd > 名词 2 解释 2</dd>
- ...
- </dl>
- 用户名: <input type="text" />
- 密 码:<input type="password" />
- <input type="radio" name="sex" />
- 男
- <input type="radio" name="sex" />
- 女
- <input type="radio" name="sex" value="男" checked="checked" />
- 男
- <input type="radio" name="sex" value="女" />
- 女
- <label>
- 用户名:
- <input type="radio" name="usename" value="请输入用户名">
- </label>
- <label for="sex">
- 男
- </label>
- <input type="radio" name="sex" id="sex">
- <label for="sex">
- 男
- </label>
- <input type="radio" name="sex" id="sex">
- <select>
- <option > 选项 1</option>
- <option > 选项 2</option>
- <option > 选项 3</option>
- ...
- </select>
- <select > 中至少包含一对 option
来源: http://www.bubuko.com/infodetail-3608028.html