前端-基础 表格标签 - 基本使用及表头单元格 详解

基本使用

主要作用  : 

即  主要 用于显示,展示数据,因为它可以让数据显示的非常的规整,可读性非常好。 

特别是后台展示数据的时候,能够熟练运用表格就显得很重要。 一个清爽简约的表格能够把繁杂

的数据表现的很有调理。 

应用实例 : 

                ​​​​​​​    前端-基础 表格标签 - 基本使用及表头单元格 详解_第1张图片

总结就是 : 表格不是用来布局页面的,而是用来展示数据的 ~! 

基本语法 : 

       

               

 

               ..........

       

        .........

 

单元格内的文字
 

#   

  是用于定义表格的标签 

#       标签用于定义表格中的行,必须嵌套

 
标签中 

#      用于定义表格中的单元格,必须嵌套在 标签中 

#   字母 td 指表格数据,即数据单元格的内容 

  是没有列的概念的,就每一行有几个单元格,那就有几列洛 ~!! 

              前端-基础 表格标签 - 基本使用及表头单元格 详解_第2张图片

              按照上示的代码编写,那就是 一行 三个单元格 

              前端-基础 表格标签 - 基本使用及表头单元格 详解_第3张图片

              我们加上内容,看具体效果 

              前端-基础 表格标签 - 基本使用及表头单元格 详解_第4张图片

               这就是 一行三单元格 的效果 ~!!!  

              前端-基础 表格标签 - 基本使用及表头单元格 详解_第5张图片

              这就显然是 三行,每行各三个单元格了, 也即 三行三列

              需要强调的是,一对      标签表示 一行  ,我们前面的那个示例,我把

              标签没有写到一行,但他只要是一对,就代表着一行~!!  

              ===>>>

             前端-基础 表格标签 - 基本使用及表头单元格 详解_第6张图片

              当然了,你可能发现怎么这个表格看起来好着也好着,但是好像也不太对呢

              别急嘛,一步步往下看~!! 

表头单元格标签  : 

    

一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示

< th >  标签表示 HTML 表格的表头部分 

基本语法

       

               

       

   

           

示例 : 

        ​​​​​​​    前端-基础 表格标签 - 基本使用及表头单元格 详解_第7张图片

            如此,也就是 我们的第一行,现在使用的是表头单元格标签了~!!

            前端-基础 表格标签 - 基本使用及表头单元格 详解_第8张图片

            显然,你可以看到,表头是加粗的,也是居中的~!! 

            

            总结 : 表头单元格也是单元格,常用于表格第一行,突出重要性。

                         表头单元格里面的文字会加粗居中显示。

你可能感兴趣的:(WEB-前端,前端,html)