html基础 表格的相关属性使用

1.1表格的基本标签
   语法结构：<table>         /*整体包裹部分,包裹多个tr */
               <tr>      /* 表格的每一个行，包裹td */
                   <td></td>   /*表格的单元格,包裹内容 */
               </tr>
                     
           </table>

2.1表格相关属性

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

html结构代码：
         <table border='1' width='300' height='300'> /* */
          <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
          </tr>
          <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅</td>
          </tr>
          <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐真漂亮</td>
          </tr>
          <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>郎才女貌</td>
          </tr>
      </table>

效果图：

 2.2 表格标题和表头单元格；表格标题：是表格上方的标题； 表头单元格：表格内部第一行加粗的文字

 

html 结构代码
    <table border='1' width='300' height='300'>
          <caption><h3>学生成绩单</h3></caption>  /*caption 表格标题*/
          <tr>
            <th>姓名</th>  /*th 是表头单元格*/
            <th>成绩</th>
            <th>评语</th>
          </tr>
          <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅</td>
          </tr>
          <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐真漂亮</td>
          </tr>
          <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>郎才女貌</td>
          </tr>
      </table>

注意：caption标签一定要写table标签内部
     th标签书写在tr标签内部、替换第一个行的td

 

3.1 表格的结构标签（了解，可有可无）

标签	作用
thead	表格头部
tbody	表格身体
tfoot	表格底部

用于包裹tr标签的

4.1合并单元格

 （1）单元格合并原则 ：
           1。上下合并 -->只保留最上面的，删除其他
           2.  左右合并 -->只保留最左边的，删除其他
 
 （2）给保留的单元格设置：跨行合并（rowspan='2' 2表示合并两行） 跨行合并（colspan='2'）

注意：不能夸结构合并的，也就thead和tbody两个结构不能跨过合并

 

html 结构代码
      <table border='1' width='300' height='300'>
          <caption><h3>学生成绩单</h3></caption>
          <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
          </tr>
          <tr>
            <td>小哥哥</td>
            <td rowspan="2">100分</td>
            <td>小哥哥真帅</td>
          </tr>
          <tr>
            <td>小姐姐</td>
            <!-- <td>100分</td> -->
            <td>小姐姐真漂亮</td>
          </tr>
          <tr>
            <td>总结</td>
            <td colspan="2">郎才女貌</td>
            <!-- <td>郎才女貌</td> -->
          </tr>
          
      </table>