【HTML+CSS】表格

表格

table是表格的区域 table的html属性

• width
• height
• border
• cellspacing 单元格与单元格之间的
• cellpadding 单元格与内容之间的间距

tr行的html属性

• align 单元格内内容的水平对齐方式
  • left
  • right
  • center
• valign 单元格内容的垂直对齐方式
  • top
  • bottom
  • middle

td单元格html属性

• rowspan 向下合并
  • colspan向右合并

单元格合并

1. 合并的时候总是向下或者向右
2. 合并几个单元格, 属性就写几个
3. 把多余的单元格注释掉

<table width="500px" height="400px" cellspacing="0" 
    cellpadding="0" border="1">
        <tr align="left" valign="top" >
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td rowspan="2">4</td>
        </tr>
        <tr>
            <td colspan="2">1</td>
            <td>2</td>
            <!-- <td>3</td> -->
            <!-- <td>4</td> -->
        </tr>
        <tr>
            <td colspan="2">1</td>
            <!-- <td>2</td> -->
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

表格的进阶标签
table

• 表格的标题caption
• 数据列分组colgroup
  • -span=2 把两列分为一组
• 数据行分组
  • thead 表格的头部
  • tbody 表格的主体
  • tfoot 表格的底部
    • 必须宝行有一个tr
    • tbody可以有多个thead和tfoot只能有一个
    • tr每一行
    • th表头单元格 自带加粗居中效果
    • td 普通单元格

<style>
    /* 基础样式 */
    table {
      width: 500px;
      height: 400px;
    }

    table,
    td {
      border: 1px solid #000;
    }

    .foot {
      background-color: cyan;
      text-align: center;
    }

    /* 进阶样式 */
    caption {
      height: 100px;
      background-color: cyan;
      font-size: 40px;
      line-height: 100px;
    }

    .col1 {
      background-color: pink;
    }

    .col2 {
      background-color: green;
    }

    th {
      height: 80px;
      border: 1px solid #000;
    }

    tr {
      text-align: center;
    }
  </style>
<table cellspacing="0">
    <caption>我是展示信息的表格</caption>
    <colgroup span="2" class="col1"></colgroup>
    <colgroup span="2" class="col2"></colgroup>
    <thead>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>兴趣爱好</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
    <tfoot>
      <tr class="foot">
        <td colspan="4">1</td>
      </tr>
    </tfoot>
  </table>

表格的css属性

• 单元格与单元格之间的间距–分离模式
  • border-spacing: 0px
• 单元格是分离模式还是合并模式
  • border-collapse
    • 分离模式 默认
      • 合并模式collapse
• 单元格是否隐藏–分离模式下
  • empty-cells
    • 出现 默认
      • hide隐藏
• 表格布局算法
  • table-layout
    • auto 表格宽度靠内容决定 默认
    • fixed 表格宽度固定

 <style>
    table {
      width: 500px;
      height: 400px;
    }

    table,
    td {
      border: 1px solid #000;
    }

    table {
      border-spacing: 0px;
      /* border-collapse: collapse; */
      empty-cells: hide;
      table-layout: fixed;
    }
  </style>
  <table>
    <tr>
      <td></td>
      <td>222222222</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </table>