Day11表格(HTML)

HTML表格

顾名思义就是一个可以放入资料的容器并且以表格的形式呈现给使用者
是个重要的功能需要小小的练习才可以对表格更有概念是个常用的标签

他就好像Excel一样有行有列的表格举个例子

    <table>
        <tr>
          <th>人名</th>
          <th>身高</th>
          <th>体重</th>
          
        </tr>
        <tr>
          <td>阿丑</td>
          <td>176cm</td>
          <td>50kg</td>
        </tr>
        <tr>
          <td>阿扁</td>
          <td>168cm</td>
          <td>100kg</td>
        </tr>
        <tr>
          <td>阿歪</td>
          <td>180cm</td>
          <td>90kg</td>
        </tr>
    </table>

介绍一下这个程序码

table主要用来包住整个格式的结构
tr(table row)用来定义表格的横列
td(table data)用来定义表格的直排也就是每一格的资料
th(table head)和td差不多但用来强调他是栏位的标题

colspan 和 rowspan

colspan用来水平合并多行 rowspan用来垂直合并多列

例如

<table>
            <tr>
              <th>人名</th>
              <th>身高</th>
              <th>兴趣</th>
              
            </tr>
            <tr>
              <td>阿丑</td>
              <td>176cm</td>
              <td rowspan="3">打球</td>
            </tr>
            <tr>
              <td>阿扁</td>
              <td>168cm</td>
             
            </tr>
            <tr>
              <td>阿歪</td>
              <td>180cm</td>
              
            </tr>
        </table>

假如他们三个都爱打球那麽我在阿丑的那行加入了rowspan直排合并=3
那麽他们三个人的格子就会变成一个大方块
但因为还没有套用css 他还没有边框可能还看得不明显