<html>
 <head>
  <title>表格标签学习</title>
  <meta charset="utf-8"/>
  <!--
   表格标签学习:
   table:声明一个表格
    tr:声明一行,设置行高及行所有单元格的高度。
     th:声明一个单元格,表头格,默认加粗居中显示
     td:声明一个单元格,默认居左显示原始数据
    注意:
     行高即该行所有单元格的高度
     单元格的宽度即列宽
   属性:
    border:给表格添加边框
    width:设置表格的宽度
    height:设置表格的高度
    cellpadding:设置内容居边框的距离
    cellspacing:设置边框大小
   特点 :
    默认根据数据的多少进行表格的大小显示
  单元格的合并:
   第一步:
    首先确保表格是一个规整的表格
   第二步:
    根据要合并的单元格,找到其所在的源码位置
   第三步:
    行合并:在要合并的单元格中第一个单元格上使用属性rowspan="要合并的单元格的个数",并删除其他要合并的单元格完成合并
    列合并:在要合并的单元格中的任意一个上使用属性colspan="要合并的单元格的个数",并删除其他要合并的单元格
  -->
 </head>
 <body>
  <h3>表格标签学习</h3>
  <hr />
  <h3>表格标签的常用属性及设置学习</h3>
  <table border="1px" cellpadding="10px" cellspacing="10px">
    <tr height="100px">
     <th width="100px">科目</th>
     <th width="100px">分数</th>
     <th width="100px">级别</th>
     <th width="150px">说明</th>
    </tr>
    <tr height="100px">
     <td>java</td>
     <td>100</td>
     <td>8</td>
     <td>面向对象的语言</td>
    </tr>
    <tr height="100px">
     <td>C语言</td>
     <td>100</td>
     <td>8</td>
     <td>面向过程的语言</td>
    </tr>
  </table>
  <hr />
  <h4>单元格的合并学习:</h4>
  <table border="1px" cellspacing="0px">
   <tr height="35px">
    <td width="100px"></td>
    <td width="100px"></td>
    <td width="100px"></td>
    <td width="100px"></td>
    <td width="100px"></td>
   </tr>
   <tr height="35px">
    <td colspan="2"></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr height="35px">
    <td></td>
    <td></td>
    <td></td>
    <td rowspan="2"></td>
    <td></td>
   </tr>
   <tr height="35px">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
  </table>
 </body>
</html>

06-HTML-表格标签的更多相关文章

  1. [19/05/16-星期四] HTML_body标签(表格标签)

    一.概念 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  2. H5 表格标签的其它标签

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. H5 表格标签基本使用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. HTML常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  5. 9月6日表格标签(table、行、列、表头)(补)

    一.<table> <table>代表表格标签.   <table></table> 1.width  表示表格宽度,宽度表达方式有像素和百分比两种.网 ...

  6. PHP入门 - - 06-->HTML的表格标签

    表格标签<table> <table>的属性: Align: left, center, right          (表格的)位置 Border:              ...

  7. 透明、圆角、阴影效果、背景色渐变、<a></a>去外层虚线、!!!表格标签<table>

    表格标签 <table> 代表表格 width:指表格的宽度           一种是像素 (浏览器缩小的时候出现滚动条)           一种是百分比(跟着浏览器的大小而大小) b ...

  8. HTML的表格标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. HTML表格标签

    table标签的用途: 在表格中放图片,或用于布局(已经淘汰掉了),存放数据 table制作过程: 1.先分析表格有多少行 2.分析有多少列 3.做好表格的基本之后再添加表格需要的一些属性 table ...

  10. html系列教程--span style 及表格标签 title video

    <span> 标签:非块状元素,用于文本描述 <style> 标签:内联样式表标签定义样式信息,必须写明type类型为text/css,建议写在head中,不是必须 demo: ...

随机推荐

  1. C#8个常用的字符串的操作

    1.根据单个分隔字符用split截取 string st="GT123_1"; string[] sArray=st.split('_'); 输出:sArray[0]=" ...

  2. 简单的ld链接脚本学习

    一. 链接脚本的整体认识 什么是链接文件呢?作用是什么呢? 当编写了多个C文件时,我们将他们编译链接成一个可执行的文件,此时就需要用到链接脚本文件(ld).ld脚本主要功能就是:将多个目标文件(.o) ...

  3. 涨姿势:Spring Boot 2.x 启动全过程源码分析

    目录 SpringApplication 实例 run 方法运行过程 总结 上篇<Spring Boot 2.x 启动全过程源码分析(一)入口类剖析>我们分析了 Spring Boot 入 ...

  4. IDEA整合Junit详细步骤

    一.添加Junit插件. 1.file-->setting-->plugins-->搜索Junit-->安装插件(一般已默认安装,无需手动安装). 二.设置Junit测试参数: ...

  5. (转)asyncio --- 异步 I/O

    原文:https://docs.python.org/zh-cn/3/library/asyncio.html asyncio 是用来编写 并发 代码的库,使用 async/await 语法. asy ...

  6. Servlet & JSP系列文章总结

    前言 谢谢大家的捧场,真心感谢我的阅读者. @all 下一期,重点在  数据结构和算法  ,希望给大家带来开心.已经出了几篇,大家爱读就是我的开心. Servlet & JSP系列总结 博客, ...

  7. vue-13-swiper组件的使用

    vue-13-swiper 是一个滑动库, 非常丰富的滑动样式, 轮播图等 https://www.swiper.com.cn https://github.com/surmon-china/vue- ...

  8. 【原创】c++拷贝初始化和直接初始化的底层区别

    说明:如果看不懂的童鞋,可以直接跳到最后看总结,再回头看上文内容,如有不对,请指出~ 环境:visual studio 2013(编译器优化关闭) 源代码 下面的源代码修改自http://blog.c ...

  9. 里氏替换原则(LSP)

    替换原则由MIT计算机科学实验室的Liskov女士在1987年的OOPSLA大会上的一篇文章中提出,主要阐述有关继承的一些原则,故称里氏替换原则. 2002年,Robert C.Martin出版了一本 ...

  10. Java网络编程的基本网络概念

    前言 自己网络这方面的知识很是薄弱,每次面试被问到这部分都会卡壳,所以很尴尬,然后最近也是有些时间了,就赶紧把自己的不足补充一下.虽然最近也在看设计模式,但是总看设计模式也容易烦,所以就并行学习,看看 ...