【html基础】原生表格一键搭建,一键生成代码

在我们做网页当中经常要用到表格,当然也有人会选择用div来绘制一个表格。而用div绘制会存在诸多问题,而且也不方便维护。所以表格标签也是我们前端开发必备的技能。

    我们先通过guiplan一键插入一个表格模版,

【html基础】原生表格一键搭建,一键生成代码_第1张图片
如果看不懂可以看源代码如下:


            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
        
th标头                 th标头                 th标头                
td表格单元                 td表格单元                 td表格单元                
td表格单元                 td表格单元                 td表格单元                
td表格单元                 td表格单元                 td表格单元                

  其中表格标签里还含有tr标签,th标签,td标签。tr标签则表示一行,td标签则表示行里的每一列,而th标签则表示表格的头部标题,th标签除了表示与现实头部标题以外,还有一个很重要的作用就是它可以控制对应列里宽度,这样如果发现内容显示不全的情况下,我们就可以在guiplan里拖拽th标签的宽度即可。
【html基础】原生表格一键搭建,一键生成代码_第2张图片
    表格除了这些子元素以外,表格还自带属性。当然这些属性我们也记不住,去查文档效率又太低。我们可以继续通过guiplan一键插入属性即可,比如给表格添加边框,只需要选中边框然后插入进来即可。
【html基础】原生表格一键搭建,一键生成代码_第3张图片
【html基础】原生表格一键搭建,一键生成代码_第4张图片
  当然边框也有很多属性,以上是内侧边框与外侧边框一起显示的效果,下一章讲解表格的其他属性。最后附上生成之后的源代码


            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
        
th标头                 th标头                 地址                
td表格单元                 td表格单元                 上海浦东虹桥某某小区某某地点                
td表格单元                 td表格单元                 td表格单元                
td表格单元                 td表格单元                 td表格单元                

你可能感兴趣的:(【html基础】原生表格一键搭建,一键生成代码)