您的位置：首页 > Web前端 > HTML

Html学习笔记5：表格标签的使用

2017-09-26 14:14 661 查看

表格标签：

<table> </table>  表格标签

属性：

border 表格的边框默认是没有的

Width=”“ 表格的宽度

Height=”“ 表格的高度

Align=”“ 取值 left（默认），center 居中，right 表格右边

Cellspacing=”“ 边框到内容的大小一般设置为0

Cellpadding=”“ 内容到边距的填充

注意：如果盒子里面的内容过多会导致盒子变大

<tr></tr>  行标签

Height 行高

Align 文字水平方向的位置

left 左边，center 居中，right 右边

Valign 文字垂直方向的位置

top 顶部，middle 居中，bottom 底部

<th></th> 标题列标签

<td></td>  列标签

建立一个表格（有固定长度的表格）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格元素</title>
</head>
<body>
<table border="1">
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>未婚</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>已婚</td>
</tr>
</table>
<br>
<table border="1" style="width: 300px;">
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>未婚</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>已婚</td>
</tr>
</table>
</body>
</html>

横向合并和纵向合并单元格

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>合并单元格</title>
</head>
<body>
<table border="1" style="width: 300px;">
<tr>
<th rowspan="5">基本情况</th>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>未婚</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="3">合计：共3人</td>
</tr>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航