HTML5表格标签

表格标签

1,表格的主要的作用
表格主要用于显示,展示数据,因为他可以让数据显得非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要一个清爽简约的表格就可以把繁杂的数据表现得很有条
2,表格的基本语法

               <table>                                            //用于定义表格的标签   
                   <tr>                                                //定义表格中的行         
                       <td>单元格内的文字</td>       //定义数据但余个的内容
                   </tr>
               </table>

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

              <table>      
                  <tr>          
                      <th>姓名</th><th>学号</th><th>性别</th><th>成绩</th>      
                  <tr>      
                  <tr>           
                      <td>qijian</td><td>20200312</td><td></td><td>90</td>
                  </tr>
              <table>

4,表格属性
表格属性我们在实际开发中不用,后面用css来设置
属性:
1,align 值 :left,conter,right 描述:规定表格相对周围元素的堆砌方式
2,border 1或“” 规定表格是否拥有边框,默认为:“”,表示没有边框
3,cellpadding 像素值 规定单元边沿与其内容之间的空白,默认1像素
4,cellapacing 像素值 规定单元格之间的空白,默认2像素
5,width 像素值或百分比 规定表格的宽度
示例:

              <!-- 这些属性要写到表格标签table 里面去 -->    
              <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">        
                  <tr>
                      <th>姓名</th>  <th>性别</th> <th> 年龄 </th>
                  </tr>        
                  <tr>
                      <td>qijian</td>  <td></td> <td> 20 </td>
                  </tr>        
                  <tr>
                      <td>kerry</td>  <td></td> <td> 19 </td>
                  </tr>        
                  <tr>
                      <td>marry</td>  <td></td> <td> 18 </td>
                  </tr>        
                  <tr>
                      <td>Tom</td>  <td></td> <td> 20 </td>
                  </tr>   
              </table>

5,表格结构标签
使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割为表格头部和表格主体两大部分。
表格的头部区域:用于定义表格的头部。内部必须拥有标签。一般位于第一行
表格的主体区域:用于定义表格的主体,用于放数据的本体
作用:
这样可以很好的分清表格的结构
这两个标签都应该在

标签内

发布了32 篇原创文章 · 获赞 24 · 访问量 5891

猜你喜欢

转载自blog.csdn.net/qq_43663493/article/details/104832047