您当前的位置: 首页 >  不太灵光的程序员 jquery

【JQuery学习笔记day8】HTML 表格

不太灵光的程序员 发布时间:2020-02-03 11:04:21 ,浏览量:4

表格
  • 表格由
标签来定义
  • 行由
  • 标签定义
  • 列由
  • 标签定义),每行被分割为若干单元格(由
    标签定义

    每个表格均有若干行(由

    标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。/p>

    
    
    row 1, cell 1
    row 1, cell 2
    
    
    row 2, cell 1
    row 2, cell 2
    
    
    

    显示效果

    表格标签

    标签描述
    定义表格
    定义表格的表头
    定义表格的行
    定义表格单元
    定义表格标题
    定义表格列的组
    定义用于表格列的属性
    定义表格的页眉
    定义表格的主体
    定义表格的页脚

    表格表头

    表格的表头使用

    标签进行定义。
    大多数浏览器会把表头显示为粗体居中的文本:

    
    
    标签
    描述
    
    
    
    定义表格
    
    
    
    定义表格的表头
    
    
    

    显示效果

    标签描述
    定义表格
    定义表格的表头

    表格边框属性

    如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
    使用 border 属性来显示一个带有边框的表格:
    border=0或者没有border属性,表格将不显示边框,border属性后的数值为表格边框的宽度。

    Row 1, cell 1Row 1, cell 2
    row 2, cell 1row 2, cell 2

    表格标题

    使用标签来显示一个带有标题的表格:

    
    Table
    
    Header 1
    Header 2
    
    
    row 1, cell 1
    row 1, cell 2
    
    
    row 2, cell 1
    row 2, cell 2
    
    
    

    显示效果

    Table
    Header 1Header 2
    row 1, cell 1row 1, cell 2
    row 2, cell 1row 2, cell 2

    表格页眉页脚

    元素应该与 元素结合起来使用,用来规定表格的各个部分(表头、主体、页脚)。

    通过使用这些元素,使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

    标签必须被用在以下情境中:作为 元素的子元素,出现在 元素之后, 元素之前。

    
    
    
    Month
    Savings
    
    
    
    
    Sum
    $180
    
    
    
    
    January
    $100
    
    
    February
    $80
    
    
    
    
    MonthSavings
    Sum$180
    January$100
    February$80

    表格列的组

    标签用于对表格中的列进行组合,以便对其进行格式化。
    通过使用 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。
    只能在 元素之内,在任何一个 元素之后,在任何一个 元素之前使用 标签。
    如果想对 中的某列定义不同的属性,请在 标签内使用 标签。

    
    
    
    
    
    
    ISBN
    Title
    Price
    
    
    3476896
    My first HTML
    $53
    
    
    5869207
    My first CSS
    $49
    
    
    

    显示效果

    表格合并单元格

    定义跨行或跨列的表格单元格。

    对列的合并使用colspan属性

    
    
    Name
    Telephone
    
    
    Bill Gates
    555 77 854
    555 77 855
    
    
    

    显示效果

    NameTelephone
    Bill Gates555 77 854555 77 855

    对行的合并使用rowspan属性

    
    
    First Name:
    Bill Gates
    
    
    Telephone:
    555 77 854
    
    
    555 77 855
    
    Sex:
    male
    
    
    

    显示效果

    First Name:Bill Gates
    Telephone:555 77 854
    555 77 855
    Sex:male

    单元格边距

    创建单元格内容与其边框之间的空白。
    使用cellpadding属性增加单元格边距

    
    
    First
    Row
    
    
    Second
    Row
    
    
    

    显示效果

    单元格间距

    增加单元格之间的距离。
    使用cellspacing属性增加单元格边距

    
    
    First
    Row
    
    
    Second
    Row
    
    
    

    显示效果

    关注
    打赏
    查看更多评论