HTML表格与DIV应用

创建表格

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

<table border="1">
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

完善表格

caption元素定义表格标题
表格一般都有标题，在 HTML 中表格标题通过<caption>定义。

<table border="1" width="300px" height="150px">
  <caption>
    表格标题
  </caption>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

给表格添加表头
表格的表头使用 <th> 标签进行定义，表头通常用于列名字。

<table border="1" width="300px" height="150px">
  <caption>
    支出表
  </caption>
  <tr>
    <th>支出</th>
    <th>备注</th>
  </tr>
  <tr>
    <td>32</td>
    <td>买苹果</td>
  </tr>
  <tr>
    <td>24</td>
    <td>买饮料</td>
  </tr>
</table>

表格与单元格的属性

image.png

单元格跨行和跨列

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

<!--单元格合并-->>
        <table border="1" width="300px" height="150px">
            <caption>单元跨两行</caption>
            <tr>
                <th>姓名</th>
                <th colspan="2">电话</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>344 22 112</td>
                <td>211 32 123</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>433 31 234</td>
                <td>311 12 145</td>
            </tr>
        </table>
        <table border="1" cellspacing="0">
            <caption>单元跨两列</caption>
            <tr>
                <th>姓名</th>
                <td>张三</th>
            </tr>
            <tr>
                <th rowspan="2">电话</th>
                <td>344 22 112</td>
            </tr>
            <tr>
                <td>211 32 123</td>
            </tr>
        </table>

注：设置 rowspan="2" 表示合并该列上的两个单元格，同样的我们可以通过设置 colspan 来合并行，快动手试试吧。合并之前，我们可以如例子般，先把所有的单元格都写出来，然后找出哪些单元格需要合并的，在第一个单元格内设置 rowspan 或者 colspan，并将其他多余的单元格代码删除。

div设置

在网页中可以使用很多个 div，在网页制作中，使用 div 可以将网页中的任何元素布局到网页中的任何位置。
语法：
<div style="样式设置"><div></div></div>
div和table的区别
div布局：

<div style="width:100%;border:1px solid #d4d4d4"  >
    <div style="background-color:pink">我非故人</div>
    <div style="background-color:skyblue">我非故人</div>
</div>

table 布局：

<table style="width:100%;border:1px solid #d4d4d4">
    <tr>
        <td style="background:pink">我非故人</td>
    </tr>
    <tr>
        <td bgcolor="skyblue">我非故人</td>
    </tr>
</table>

两个布局的最终效果：

image.png

同样的效果，使用 div 布局能比表格更加灵活，但是我们需要根据不同的场景使用不同的布局方式，现在我们来看看两种布局的优缺点。
table 元素布局:
优点：
1.理解比较简单。
2.不同的浏览器看到的效果一般相同。
缺点：
1.显示样式和数据绑定在一起。
2.布局的时候灵活度不高。
3.一个页面可能会有大量的 table 元素，代码冗余度高。
4.增加带宽。
5.搜索引擎不喜欢这样的布局。
div 元素布局
优点：
1.符合 W3C 标准。
2.搜索引擎更加友好。
3.样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
4.节省代宽，代码冗余度低。
5.表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

本章作业

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

image.png

源码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>课程表</title>
    </head>
    <body>
        <table border="1" bgcolor="pink" width="60%" cellpadding="2">
            <caption>课程表</caption>
            <tr align="center">
                <td colspan="3">时间\日期</td>
                <td>一</td>
                <td>二</td>
                <td>三</td>
                <td>四</td>
                <td>五</td>
            </tr>

            <tr align="center">
                <td rowspan="2">上午</td>
                <td colspan="2">9:30-10:15</td>
                <td>语文</td>
                <td>数学</td>
                <td>外语</td>
                <td>音乐</td>
                <td>体育</td>
            </tr>

            <tr align="center">
                <td colspan="2">10:25-11:10</td>
                <td>数学</td>
                <td>数学</td>
                <td>物理</td>
                <td>化学</td>
                <td>生物</td>
            </tr>

            <tr>
                <td colspan="8">&nbsp;</td>
            </tr>

            <tr align="center">
                <td rowspan="2">下午</td>
                <td colspan="2">14:30-15:15</td>
                <td>体育</td>
                <td>语文</td>
                <td>历史</td>
                <td>政治</td>
                <td>化学</td>
            </tr>

            <tr align="center">
                <td colspan="2">15:25-16:10</td>
                <td>音乐</td>
                <td>语文</td>
                <td>数学</td>
                <td>美术</td>
                <td>语文</td>
            </tr>
        </table>
    </body>
</html>