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


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

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

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

作用:

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

这两个标签都应该在

标签内


相关文章
|
25天前
HTML_表单标签
HTML_表单标签
16 0
|
11天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
13天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
13天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
13天前
|
前端开发 JavaScript UED
【专栏:HTML基础篇】HTML列表与表格:展示数据的两种方式
【4月更文挑战第30天】本文探讨了HTML中的列表和表格两种元素在网页设计中的重要性。无序列表(`&lt;ul&gt;`)和有序列表(`&lt;ol&gt;`)用于呈现相关项目,前者常用于导航菜单,后者适合有序信息。表格(`&lt;table&gt;`)用于展示结构化数据,通过`&lt;tr&gt;`、`&lt;td&gt;`和`&lt;th&gt;`定义行和单元格。尽管简单,列表和表格在内容呈现和用户体验上起着关键作用。然而,响应式设计趋势下,表格可能被更灵活的布局替代,复杂数据展示则可借助JavaScript库提升交互性。正确使用这些基础元素能有效组织信息,创建优质网页。
|
16天前
|
前端开发 数据安全/隐私保护
Day-1 HTML基本标签和CSS常用样式
Day-1 HTML基本标签和CSS常用样式
|
18天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
20 1
|
25天前
|
前端开发 容器
HTML_块级标签
HTML_块级标签
12 0
|
6月前
|
数据采集 前端开发 JavaScript
【 ⑤】HTML概述与基本标签详解
【 ⑤】HTML概述与基本标签详解
29 0
|
11月前
|
前端开发 JavaScript Java
【HTML】基本标签介绍
HTML基本标签介绍 1. HTML是什么? HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言
60 0