html-表格的理解和使用

作者: Coder东 | 来源:发表于2017-06-28 17:50 被阅读29次

html-表格的理解和使用
HTMl-表格
H5前端开发学习笔记——0x05表格标签
HTML-表格（td）
五 HTML-表格

HTML-表格table-2018.07.05

1.0.0  表格标签也是用来给一堆数据添加语义
    表格是一种数据表现形式，当数据量非常大的时候，表格这种展现形式被认为是最清晰的一张展现形式。
    表格的格式：
    <table>
        <tr>
            <td></td>
         </tr>
    </table>
    其实表格标签中的table就是代表表格，也就是一对table标签就是一个表格
    其实表格标签中的tr标签代表整个表格中的一行数据
    也就是说一对tr标签代表表格中的一行
    其实表格标签中的td标签就是表格中一行中的一个单元格
    也就是一对td标签就是一行中的一个单元格
    
    1.0.1 表格标签有边框属性：默认情况下这个属性的值为0，当属性值为0的时候是不会显示的。
    表格标签和列表标签一样，他也是一个组合table 和tr/td 一起出现的，不会单个出现
  
    1.0.2 宽度和高度的使用：
    可以给table标签和td标签使用
    表格的宽度和高度默认是按照内容的尺寸来调整的，也可以通过给table标签设置width和height属性的方式来手动指定表格的宽度和高度
    1.0.3 如果给td标签设置width和height属性，会修改当前的单元格的宽度和高度，不会影响整个表格的宽度和高度
    1.0.4 水平对齐和垂直对齐属性
    其中水平对齐可以给table标签 和 td/tr 标签使用
    垂直对齐只能给tr标签和td标签使用
    1.0.5 给table标签设置align属性，可以控制表格在水平方向的对其方式
    1.0.6 给tr标签设置align属性，可以控制当前行中所有的单元格的对齐属性
    给td设置align属性，可以控制当前单元格的对齐方式
    注意点：
    如果tr和td都设置的话，按照td的设置为准
    
    1.0.7  给tr设置了valign属性，可以控制当前行中所有的单元格的内容的，在垂直方向的对齐方式
    1.0.8  给td设置了valign属性，可以控制当前单元格中的内容在垂直方向的对其方式
    注意点：
    如果td中设置了valign属性，tr中也设置了valign属性，那么单元格中的内容就会按照td中设置的来对齐

    2.0.0 
    外边距和内边距：
    外边距：就是单元格和单元格之间的距离，只能给table使用,默认情况下单元格之间的距离为2px
    内边距： 就是单元格的边框和文字之间的间隙,默认为1px；
    注意：
     以上仅为了解，以后所有的样式都是css实现

      2.0.1 细线表格的设置方式：
      1.给table标签设置bgcolor
      2.给tr标签设置bgcolor
      3.给table标签设置cellspacing = “1px”；
      
     注意点：table标签和tr标签以及td标签都支持bgcolor属性，但是以上内容仅仅作为了解，因为样式都是要通过css来控制

    caption标签的注意点：专门用来设置表格的标题，设置完成就会自定居中
    caption标签一定要卸载table标签中，否则无效，一定要紧跟在table标签后面
      标题单元格标签：
    在表格标签中提供了一个标签专门用来存储每一列的标题，这个标签就做th标签，只要将当前的标题存储在这个标签中，就会自动居中+加粗文字
    到此为止我们发现，其实表格中有两种单元格，一种是td，一种是th，td专门用来存储数据的，th是专门用来存储当前列的标题的

    3.0.0 
    单元格的合并问题：
    水平方向的单元格的合并：可以给td标签添加一个colspan属性，来指定把某一个单元格当做多个单元格来看待
    例如： <td colspan = "2"></td>含义：当前单元格当做两个单元格来看待
    注意点：
    1. 由于把某一个单元格当做了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格才能正常显示
    2. 一定要记住单元格合并永远都是向后或者向下合并，而不能向前或者向上合并
    3.0.1   
    垂直方向的单元格的合并
    可以给td标签设置一个rowspan属性，来指定把某一个单元格当做多个单元格来看待（垂直方向）
    例如：
    <td rowspan = "2"></td>
    含义：把当前单元格当做两个单元格来看待

    快速移动选中的代码的上下移动：
    往上：control + shift + 方向键上
    往下： control + shift + 方向键下
    
    快速合并和展开代码（合并展开的是某一标签）
    合并：control + - 
    展开： control + + 
    
    快速合并和展开代码（合并和展开选中的所有标签）
    合并： control  + shift + - 
    展开： control + shift + +

    <body>
<!--

1.默认情况下文字和输入框没有关联关系的,
也就是说点击文字输入框不会聚焦,如果想点击文字时
让对应的输入框聚焦,那么就需要让文字和输入框进行
绑定

2. 要想让输入框和文字绑定在一起,那么我们可以使用
label标签

3. 绑定 的格式
    3。1 将文字利用label标签包裹起来
    3。2 给输入框添加一个id属性
    3。3 在label标签中通过for属性和输入框中的id进行绑定即可

-->
<form>
    <label for="account">账号:</label><input type="text" id="account">              <br>
    <label for="pwd">密码:</label><input type="password" id="pwd">
</form>
    </body>
    

    <body>
    <!--
    1.datalist标签
    作用:给输入框绑定带选项
    如何绑定带选型呢:
    1.搞一个输入框
    2.搞一个datalist列表
    3.给datalist列表标签添加一个id
    4,给输入框添加一个list属性,将datalist的
    id对应的值赋给list属性即可。
    -->

请输入你的车型:<input type="text" list="cars">

<datalist  id="cars">
    <option>奔驰</option>
    <option>宝马</option>
    <option>奥迪</option>
    <option>路虎</option>
</datalist>

html-表格的理解和使用
HTMl-表格
一、表格介绍 table：代表是一个表格caption:表头，例如商品库存表tr：每行td：每列名，左对齐th：...
H5前端开发学习笔记——0x05表格标签
本节大纲课时37表格标签基本使用(理解) 课时38表格标签的属性(了解) 课时39细线表格(理解) 课时40表格...
HTML-表格（td）
1、简介：表格由标签来定义。行 ,单元格 ,数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格...
五 HTML-表格
1、作用以表格形式将数据显示出来，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式。 2 、...
html-表格