今天完成的事情：任务8的第二个页面写完了。开始写第三个页面。看一下tr还有td表格。

明天计划的事情：明天打算写完第三个页面，再讲一下小课堂。

遇到的问题：任务八的第二个页面基本没有什么问题。最大的问题可能就是左侧合作企业的排序了。

这里就要用到flex中的 flex-direction：column；column：主轴为垂直方向，起点在上沿。

收获：

要想创建表格，就需要使用表格相关的标记
<table>
    <tr>
    <td>单元格内的文字</td>
      ...
    </tr>
    ...
</table>
 包含三对HTML标记，分别为<table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标记，缺一不可
<table></table>：用于定义一个表格。
<tr></tr>：用于定义表格中的一行，必须嵌套在<table></table>标记中，在<table></table>中包含几对<tr></tr>，就有几行表格。
<td></td>：用于定义表格中的单元格，必须嵌套在<tr></tr>标记中，一对<tr></tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

注意:
学习表格的核心是学习<td></td>标记，他就像一个容器，可以容纳所有的元素，<td></td>中甚至可以嵌套表格<table></table>。但是<tr></tr>中只能嵌套<td></td>，直接在<tr></tr>标记中输入文字的做法是不被允许的。

<table>标记的属性

属性名 含义 常用属性值
border 设置表格的边框（默认border="0"无边框） 像素值 
cellspacing 设置单元格与单元格边框之间的空白间距 像素值（默认为2像素）
cellpadding 设置单元格内容与单元格边框之间的空白间距 像素值（默认为1像素）
width 设置表格的宽度 像素值
height 设置表格的高度 像素值
align 设置表格在网页中的水平对齐方式 left、center、right
bgcolor 设置表格的背景颜色 预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background 设置表格的背景图像 url地址

cellpadding类似于盒子模型的内边距padding，指的是单元格内部的距离，cellspacing则指的是外部单元格与单元格之间的距离。可以结合盒子模型的内外边距理解cellpadding与cellspacing的不同。

<tr>标记的属性

制作网页时，有时需要表格中的某一行特殊显示，这时就可以为行标记<tr>定义属性
属性名 含义 常用属性值
height 设置行高度 像素值 
align 设置一行内容的水平对齐方式 left、center、right
valign 设置一行内容的垂直对齐方式 top、middle、bottom
bgcolor 设置行背景颜色 预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background 设置行背景图像 url地址


注意
<tr>标记无宽度属性width，其宽度取决于表格标记<table>。
可以对<tr>标记应用valign属性，用于设置一行内容的垂直对齐方式。

虽然可以对<tr>标记应用background属性，但是在<tr>标记中此属性兼容问题严重。

<td>标记的属性

在网页制作过程中，有时仅仅需要对某一个单元格进行控制，这时就可以为单元格标记<td>定义属性
属性名 含义 常用属性值
width 设置单元格的宽度 像素值 
height 设置单元格的高度 像素值
align 设置单元格内容的水平对齐方式 left、center、right
valign 设置单元格内容的垂直对齐方式 top、middle、bottom
bgcolor 设置单元格的背景颜色 预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background 设置单元格的背景图像 url地址
colspan 设置单元格横跨的列数（用于合并水平方向的单元格） 正整数
rowspan 设置单元格竖跨的行数（用于合并竖直方向的单元格） 正整数