<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 3*3的表格 -->
<!-- tr*3>td*3 -->
<!-- (tr>td*3)*3 -->
<table width="300px" height="300px" border="1" bordercolor="green" bgcolor="pink" cellspacing="0" align="left" valign="top"rules="groups">
<tr align="center" valign="top">
<td colspan="2">1</td>
<td>2</td>
<!-- <td>3</td> -->
</tr>
<tr>
<td rowspan="2">4</td>
<td align="center" valign="top">5</td>
<td>6</td>
</tr>
<tr>
<!-- <td>7</td> -->
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
<!--
表格之前使用来布局的，现在只是用来左数据展示 - 表格性能非常差
表格标签的使用：
标签名称：table - 表格
tr - 行
td - 列
表格里面的属性设置: html属性
- width/hright 宽高
- border 边框 默认为黑色，样式默认为实线
- bordercolor 边框颜色
- bgcolor 背景颜色
- cellspacing 单元格之间间距的处理,属性值常用为0 由space演变过来表示空间的意思
- cellpadding 单元格与内容之间的距离
- align 水平方向 left right center
- table、tr、td均可添加
- valign 垂直方向 verticl垂直的意思 top（上）、bottom（下）、middle(中间)
- 加在table是无法实现垂直方向居中的
- tr、td 默认就是垂直居中的
- 单元格的合并：
- 列合并 colspan
- 行合并 rowspan
- 总结： 跨行合行、跨列合列
- rules="rows/cols/all/none/groups" 添加分格线
说明：
rows:位于行之间的线条
cols:位于列之间的线条
all:位于行和列之间的线条
none:没有线条
groups:位于行组和列组之间的线条 分组
-->
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
