web初步-html-表格

表格的基本结构

使用 < table > 标签建立表格，一对 < tr> 标签表示 一行，在每一行中，< td> 表示列
一个简单的示例：

<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>爱好</td>
</tr>

<tr>
<td>张晓东</td>
<td>男</td>
<td>19</td>
<td>画画</td>
</tr>

<tr>
<td>王芳</td>
<td>女</td>
<td>20</td>
<td>唱歌</td>
</tr>

<tr>
<td>赵孙磊</td>
<td>男</td>
<td>18</td>
<td>编程</td>
</tr>

<tr>
<td>孙诗诗</td>
<td>女</td>
<td>18</td>
<td>舞蹈</td>
</tr>

</table>

效果：

< table> 标签有一个border属性，可以设置表格的边框:
例如，上一个表格给 < border > 标签加上border属性

<table border="1">

效果：

border属性值越大，外层边框越粗

还有一个 < th > 标签，是用于设置表头的，现在，将姓名性别的一行的每一列改为用< th > 标签代替,剩余四行不变:
效果：

可以看出，第一行的各列的属性有所改变，加粗，居中…

另外表格也有width 和 height属性，虽然在html5中已经被废弃了，但还是可以使用

---

合并单元格

• 用 colspan 属性左右合并单元格
  将上表中的王芳一行的姓名和性别合并：

<tr>
<td colspan = "2" >王芳</td>
<td>20</td>
<td>唱歌</td>
</tr>

colspan的值表示合并几个格子，这里设置值为2，这一行的前两个格子就合并一起了，(默认是左对齐)。我删去了“女”的格子：
效果：

• 用 rowspan 属性上下合并单元格
  我想将赵孙磊和孙诗诗爱好这一列的编程和舞蹈合并，改为恋爱：

<tr>
<td>赵孙磊</td>
<td>男</td>
<td>18</td>
<td rowspan = "2">恋爱</td>
</tr>

<tr>
<td>孙诗诗</td>
<td>女</td>
<td>18</td>

</tr>

在上面代码中，因为 行 合并 默认是向下合并的，我设置的是编程的格子，向下合并所以要删去舞蹈的格子，将编程改为恋爱，然后设置属性rowspan值等于2，表示合并两行。
效果：

---

用 align 属性设置对齐方式

行，列都可以设置对齐方式，之前说过，表格大小可以设置，我调整一下表格大小，然后将第一行整个设置为居中，然后将王芳这一大格子设置居中：
eg：
设置的表格大小，使用width和height属性：

<table border = "3" width = "500" height = "350" >

张晓东这一整行设置居中，所以在< tr>标签中设置，align的值“center”表示居中对齐

<tr align = "center">
<td>张晓东</td>
<td>男</td>
<td>19</td>
<td>画画</td>
</tr>

将王芳这一格设置居中对齐，由于是对列设置对齐，所以在 < td> 标签中设置 ：

<tr>
<td colspan = "2" align = "center">王芳</td>
<td>20</td>
<td>唱歌</td>
</tr>

效果：

---

用 bgcolor 属性设置表格背景色和边框颜色

设置整个表格颜色，在 < table > 标签中设置，（被废弃了）

<table border = "1"  bgcolor = "yellow">

将一整行设置颜色， 在 < tr> 标签中 设置

<tr align = "center">
<td>张晓东</td>
<td>男</td>
<td>19</td>
<td>画画</td>
</tr>

对某一格设置颜色， 在 < td>标签中设置

<tr>
<td colspan = "2" align = "center" bgcolor = "red" >王芳</td>
<td>20</td>
<td>唱歌</td>
</tr>

效果:

---

用 cellpadding 属性和 cellspacing 属性设定边距

• cellspadding 属性设定表格单元格中的内容距离格线的距离
  eg：

<table border = "1" width = "500" height = "350" bgcolor = "yellow" cellpadding = "20px;" >

可以和前面的图对比一下，内容距离边框有所改变

• cellspacing 属性设定表格相邻单元格边线之间的距离。

<table border = "1" width = "500" height = "350" bgcolor = "yellow" cellspacing = "20px;" >

也可以和前面的图对比一下，格子与格子之间的间距变大了。

这里对这个两个属性的赋值强调一下，它的值是有单位的，是px，且要在后面加上一个分号。