HTML表格 与 表格:行与列的合并

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格也是用一组标签来描述:table,thead,tbody,tr,td/th
所有的数据必须填充到td /th中, th是td的PLus+,自带了一个加粗和居中的样式

<table class="product">
           <!-- <caption> 标签定义表格的标题。<caption> 标签必须直接放置到 <table> 标签之后。您只能对每个表格定义一个标题。 -->
          <caption>
              商品信息表
          </caption>
          <!-- <thead> 标签用于组合 HTML 表格的表头内容 -->
          <thead>
              <tr>
                  <!-- <tr> 标签定义 HTML 表格中的行 -->
                  <th>ID</th>
                  <!-- <th> 元素中的文本通常呈现为粗体并且居中。 -->
                  <th>品名</th>
                  <th>单价</th>
                  <th>单位</th>
                  <th>数量</th>
                  <th>金额</th>
              </tr>
           </thead>
           <!-- <tbody> 标签用于组合 HTML 表格的主体内容 -->
           <tbody>
              <tr>
                <!-- <tr> 标签定义 HTML 表格中的行 -->
                <td>A100</td>
                <!-- <td> 元素中的文本通常是普通的左对齐文本。 -->
                <td>手机</td>
                <td>8888</td>
                <td>部</td>
                <td>1</td>
                <td>8888</td>
              </tr>
              <tr>
                <td>A101</td>
                <td>汽车</td>
                <td>9999</td>
                <td>辆</td>
                <td>1</td>
                <td>9999</td>
              </tr>
              <tr>
                <td>A102</td>
                <td>电脑</td>
                <td>5555</td>
                <td>台</td>
                <td>1</td>
                <td>5555</td>
              </tr>
            </tbody>
       </table>
       <p class="page">
           <a href="">首页</a>
           <a href="">...</a>
           <a href="">6</a>
           <a href="">7</a>
           <a href="">8</a>
           <a href="">9</a>
           <a href="">10</a>
           <a href="">...</a>
           <a href="">尾页</a>
       </p>

---

表格:行与列的合并

rowspan 属性 是规定单元格可合并的行数。
colspan 属性 是规定单元格可合并的列数。

 <table class="lesson">
        <caption>
            合肥市第一小学课程表
        </caption>
        <thead>
        <tr>
            <!-- colspan 属性定义表头单元格应该横跨的列数 -->
            <th colspan="2"></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <!-- rowspan 属性定义表头单元格应该横跨的行数 -->
                <td rowspan="4">上午</td>
                <td>1</td>
                <td>语文</td>
                <td>数学</td>
                <td>语文</td>
                <td>科学</td>
                <td>语文</td>
            </tr>
            <tr>
                <!-- <td>上午</td> -->
                <td>2</td>
                <td>数学</td>
                <td>语文</td>
                <td>数学</td>
                <td>语文</td>
                <td>数学</td>
            </tr>
            <tr>
                <!-- <td>上午</td> -->
                <td>3</td>
                <td>数学</td>
                <td>语文</td>
                <td>数学</td>
                <td>语文</td>
                <td>语文</td>
            </tr>
            <tr>
                <!-- <td>上午</td> -->
                <td>4</td>
                <td>音乐</td>
                <td>体育</td>
                <td>美术</td>
                <td>科学</td>
                <td>体育</td>
            </tr>
            <tr class="rest">
                <td colspan="7">中午休息</td>
            </tr>
            <tr>
                <td rowspan="3">下午</td>
                <td>5</td>
                <td>语文</td>
                <td>数学</td>
                <td>语文</td>
                <td>数学</td>
                <td>语文</td>
            </tr>
            <tr>
                <!-- <td>下午</td> -->
                <td>6</td>
                <td>数学</td>
                <td>语文</td>
                <td>数学</td>
                <td>语文</td>
                <td>数学</td>
            </tr>
            <tr>
                <!-- <td>下午</td> -->
                <td>7</td>
                <td>数学</td>
                <td>语文</td>
                <td colspan="3">自由活动</td>
            </tr>
        </tbody>
    </table>