HTML学习12（实践6）：表格

在网页中插入表格可以使网页上的内容排列整齐，让浏览者对表格中表达的数据及其含义一目了然。

1、表格基本标签

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

我们先来创建一个简单的表格

<table>
    <tr>
          <td>姓名</td>
          <td>性别</td>
          <td>学号</td>
      </tr>
      <tr>
          <td>LZYIED</td>
          <td>帅哥</td>
          <td>20217895</td>
      </tr>
  </table>

这个表格为什么没有边框呢？接下来让我们为它添加一个 border 属性再来看看效果。

2、给表格添加表头

表格的表头使用 <th> 标签进行定义，table head的缩写，粗体居中的效果，表头通常用于列名字。对于表格内容中的某一行如果需要粗体居中的效果，也可以使用<th>标签。

3、caption元素定义表格标题

表格一般都有标题，在 HTML 中表格标题通过 <caption> 定义。
表格标题必须是table标签的子标签，默认显示在表格的上方。

<table border="1">
	<caption>学生信息</caption>
     <tr>
         <th>姓名</th>
         <th>性别</th>
         <th>学号</th>
     </tr>
     <tr>
         <th>LZYIED</th>
         <th>帅哥</th>
         <th>20217895</th>
     </tr>
 </table>

如果想当表格标题在表格下方显示，定义下列样式：

4、表格其他属性

属性的使用和 border 类似，只需要在 table 标签中添加属性即可，大家可以尝试着使用。

<table border="1" width="300px" height="150px" bgcolor="#FFFFE0">
    <caption style="caption-side: bottom;">学生信息</caption>
	<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>学号</th>
	</tr>
	<tr>
			<th>LZYIED</th>
			<th>帅哥</th>
			<th>20217895</th>
	</tr>
</table>

设置cellspacing="10px"


设置cellpadding="10px"

5、单元格跨行

绘制表格的时候，我们常常需要合并单元格，而在 HTML 中提供了 colspan（合并行）和 rowspan（合并列）属性来帮助我们实现这一效果。
rowspan表示当前单元格要跨越的行数。即合并列，跨越行。

设置 rowspan="2" 表示合并该列上的两个单元格
小结：
合并之前，我们可以先把所有的单元格都写出来，然后找出哪些单元格需要合并的，在第一个单元格内设置 rowspan 或者 colspan，并将其他多余的单元格代码删除。

6、单元格跨列

colspan表示当前单元格要跨越的列数。即合并行，跨越列。

7、使用CSS设置表格样式

一般而言，我们会通过CSS来设置表格的样式，很少会通过表格属性来设置。这是后面CSS要学习的内容，我们可以先了解一下。

padding: 3px;设置文字与单元格之间的距离为3px。

8、挑战：课程表绘制

请你尝试着根据我们前面所需的内容绘制如下所示的课程表。

9、小结

*table常用标签：*

• table标签：声明一个表格
• tr标签：定义表格中的一行
• td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示加粗（通常表头）单元格

table常用属性：

• border 定义表格的边框
• cellpadding 定义单元格内内容与边框的距离
• cellspacing 定义单元格与单元格之间的距离
  align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
  valign设置单元格中内容的垂直对齐方式 top | middle | bottom
  colspan设置单元格水平合并
  rowspan设置单元格垂直合并

表格常用样式属性：

• caption-side设置表格标题位置
• border-spacing设置单元格间距
• border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格

10、实践

用表格改造suggest.html中的发布美食版块。