HTML表格标签

1.表格的主要作用
   显示展示数据,表格不是用来布局页面的,而使用来展示数据的。


2.表格的主要语法
  <table>
     <tr>
      <td>单元格的文字</td>
      ...
    <tr>
  <table>
 (1)<table>用来定义表格标签。
 (2)<tr>标签用于定义表格中的行,必须嵌套在<table>标签中。
 (3)<td>用于定义表格中的单元格,必须嵌套在<tr>中。
 (4)字母td指的是表格数据(table data),即数据单元格中的内容。


3.表头单元格标签
   一般的表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容 加粗 居中 显示
    <th>标签表示HTML表格的表头部分(table head的缩写)
      <table>
        <tr>
         <th>姓名<th>
         ...
         </tr>
     </table>


4.表格属性
    表格标签这部分实行我们实际不常用,后面通过CSS来设置
    目的有两个:
    1.记住这些英语单词,后面的CSS会使用。
    2.直观的感受表格的外观形态。
    属性名                 属性值              描述
    align                   left center          规定表格相对周围元素的对齐方式
    border                  1或者""             边框
    celloandding        像素值              规定单元边沿与其内容之间的空白,默认1像素。
    cellspacing           像素值              规定单元格之间的空白,默认2像素。
    width         像素值或百分比          规定表格宽度


5.表格的结构标签

    使用场景:因为表格可能很长,为了更好地表示表格的语义,可以将表格分割成表格头部和表格主体两大部分。
    <thead>标签表格的头部区域,<tbody>标签 表格的主体区域 这样可以更好地风情表格结构


6.合并单元格
    特殊情况下,可以把多个单元格合并为一个单元格
    (1)合并单元格的方式
        跨行合并:rowspan=“合并单元格的个数”
        跨列合并:colspan=“合并单元格的个数”
    (2)目标单元格
        跨行:最上侧单元格为目标单元格 写合并代码。
        跨列: 最左侧的单元格为目标的单元格,写合并代码。
    (3)合并单元格的步骤。
    合并单元格三步曲:
    1.先确定是跨行还是跨列合并
    2.找到目标单元格 写上合并方式。比如<td colspan = "2"> </td>.
    3.删除多余单元格

posted @ 2020-05-24 21:44  qiuqiu95  阅读(242)  评论(0编辑  收藏  举报