HTML5学习-表格标签

简介: 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,表格结构标签


使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割为表格头部和表格主体两大部分。

表格的头部区域:用于定义表格的头部。内部必须拥有标签。一般位于第一行

表格的主体区域:用于定义表格的主体,用于放数据的本体

作用:

这样可以很好的分清表格的结构

这两个标签都应该在

标签内


相关文章
|
5天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
12天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
15天前
HTML 表格4
HTML 表格标签用于创建和布局表格。主要标签包括:`&lt;table&gt;` 定义表格,`&lt;th&gt;` 定义表头,`&lt;tr&gt;` 定义行,`&lt;td&gt;` 定义单元格,`&lt;caption&gt;` 定义标题,`&lt;colgroup&gt;` 和 `&lt;col&gt;` 定义列属性,`&lt;thead&gt;`、`&lt;tbody&gt;` 和 `&lt;tfoot&gt;` 分别定义表格的页眉、主体和页脚。
|
15天前
HTML 表格2
本示例展示了如何使用 HTML 的 `&lt;table&gt;` 标签和 `border` 属性创建一个带有边框的简单表格。表格包含两行两列,每行有两个单元格,通过设置 `border=&quot;1&quot;` 显示边框。
|
15天前
|
前端开发
HTML 表格1
HTML 表格是用于展示结构化数据的标记语言元素,由 `&lt;table&gt;` 标签定义。表格包含行(`&lt;tr&gt;`)、单元格(`&lt;td&gt;`)和表头(`&lt;th&gt;`)。表格可细分为 `&lt;thead&gt;`(标题部分)和 `&lt;tbody&gt;`(主体部分),支持合并单元格、跨行/跨列操作及 CSS 样式定制。
|
26天前
|
人工智能
|
1月前
HTML表格
HTML表格
42 4
|
12天前
|
存储 移动开发 前端开发
|
15天前
HTML 表格3
HTML 表格的表头使用 `&lt;th&gt;` 标签定义,通常以粗体居中显示。
|
1月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
39 2

热门文章

最新文章