HTML笔记 7.table表格

HTML 表格

表格元素	含义
table	HTML文档中的表格
tr	表格行
th	表头。（单元格中的标题元素），对单元格数据的说明
td	单元格

HTML中的表格基于行而不是列，每个行必须分别标记。
HTML5中，表格不应该，也不能用来处理页面布局。

示例代码：



    
        表头标题一
        表头标题二
    
    
        第一行，第一列
        第一行，第二列
    
    
        第二行，第一列
        第二行，第二列

表头标题一	表头标题二
第一行，第一列	第一行，第二列
第二行，第一列	第二行，第二列

表格中的表头

姓名	性别	备注
Andy	man	0510-8233

姓名	Andy
性别	man
电话	0510-8233

跨行或跨列的表格单元格

表格元素	含义
colspan	让一个单元格横跨多列
rowspan	让一个单元格纵跨多行

为colspan 和 rowspan 设置的值必须是整数。

单元格跨两格

    
        Name
        Telephone
    
    
        Bill Gates
        MicroSoft
        666
    


单元格跨两列

    
        Name
        Andy
    
    
        Telephone
        Hello
    
    
        World

Name	Telephone
Bill Gates	MicroSoft	666

Name	Andy
Telephone	Hello
World

表格内的标签


    
        
            Stay Hungry
            Stay Foolish
        
        
            这个单元格里包含一个表格
            
                
                    A1
                    A2
                
                
                    B1
                    B2
                
            
        
    
    
        
            这个单元格包含一个列表
            
                Apple
                banana
                oranges
            
        
        
            这个单元格里放一张图片

单元格边距

cellpadding属性设置的是单元格内的留白。

单元格间距

cellspacing 属性设置的是单元格之间的距离。

caption、 thead、tfoot、tbody 元素 headers 属性

示例1.1

table.css 文件：

thead th,
tfoot th {
    text-align: left;
    background: grey;
    color: white;
}

tbody th {
    text-align: right;
    background: lightgrey;
    color: grey;
}
[colspan], [rowspan] {
    font-weight: bold;
    border: medium solid black;
}
thead [clospan], tfoot [colspan] {
    text-align: center;
}
caption {
    font-weight: bold;
    font-size: large;
    margin-bottom: 5px;
}

index.html 文件：





    
    Example
    
    
    
    



    
        
        Result of the 2011 Fruit Survey
        
        
            
                Rank
                Name
                Color
                Size & Votes
            
        
        
        
            
                 & copy; 2011 Adam Freeman Fruit Data Enterprises
            
        
        
        
            
                
                Favourite:
                Apples
                Green
                Medium
                500
            
            
                2nd Favourite
                Oranges
                Orange
                Large
                450
            
            
                3nd Favourite
                Pomegranate
                
                    Pomegranates and cherries can both come in a range of colors
                
                203
            
            
                Joint 4th:
                Cherries
                75
            
            
                Pineapple
                Brown
                Very Large

Result of the 2011 Fruit Survey
Rank	Name	Color	Size & Votes
& copy; 2011 Adam Freeman Fruit Data Enterprises
Favourite:	Apples	Green	Medium	500
2nd Favourite	Oranges	Orange	Large	450
3nd Favourite	Pomegranate	Pomegranates and cherries can both come in a range of colors	203
Joint 4th:	Cherries	75
Pineapple	Brown	Very Large

处理列 —— colgroup、col

colgroup元素，该属性用来对表格中的列应用样式。

table.css 文件

    thead th,
    tfoot th {
        text-align: left;
        background: grey;
        color: white;
    }

    tbody th {
        text-align: right;
        background: lightgrey;
        color: grey;
    }

    [colspan],
    [rowspan] {
        font-weight: bold;
        border: medium solid black;
    }

    thead [colspan],
    tfoot [colspan] {
        text-align: center;
    }

    caption {
        font-weight: bold;
        font-size: large;
        margin-bottom: 5px;
    }

    #colgroup1 {
        background-color: red;
    }

    #colgroup2 {
        background-color: green;
        font-size: small;
    }

index.html 文件





    
    Example
    
    
    
    



    
        
        Resutl of the 2011 Fruit Survey
        
        
        
        

        
        
            
                Rank
                Name
                Color
                Size & Votes
            
        
        
        
            
                Favourite:
                Apples
                Green
                Medium
                500
            
            
                2th Favourite:
                Oranges
                Orange
                Large
                450
            
            
                3th Favourite:
                Pomegranates
                Pomegranates and cherries can both come in a range of colors and size.
                203
            
            
                Joint 4th
                cherries
                75
            
            
                Poneapple
                Brown
                Very Lareg
            
        
        
        
            
                & copy; 2011 Adam Freeman Fruit Data Enterprises

Resutl of the 2011 Fruit Survey
Rank	Name	Color	Size & Votes
Favourite:	Apples	Green	Medium	500
2th Favourite:	Oranges	Orange	Large	450
3th Favourite:	Pomegranates	Pomegranates and cherries can both come in a range of colors and size.	203
Joint 4th	cherries	75
Poneapple	Brown	Very Lareg
& copy; 2011 Adam Freeman Fruit Data Enterprises

应用到元素上的样式在具体程度上低于直接应用到tr、td和th元素上的样式。
不规则单元格被记入其起始列。
元素的影响范围覆盖了列中所有的单元格。

表示个别的列

元素既能对一组列应用样式，也能对该组中个别的列应用样式。

table.css 文件

    thead th,
    tfoot th {
        text-align: left;
        background: grey;
        color: white;
    }

    tbody th {
        text-align: right;
        background: lightgrey;
        color: grey;
    }

    [colspan],
    [rowspan] {
        font-weight: bold;
        border: medium solid black;
    }

    thead [colspan],
    tfoot [colspan] {
        text-align: center;
    }

    caption {
        font-weight: bold;
        font-size: large;
        margin-bottom: 5px;
    }

    #colgroup1 {
        background-color: red;
    }

    #col3 {
        background-color: green;
        font-size: small;
    }

index.html 文件





    
    Example
    
    
    
    



    
        
        Resutl of the 2011 Fruit Survey
        
        
        
            
            
            
        
        

        
        
            
                Rank
                Name
                Color
                Size & Votes
            
        
        
        
            
                Favourite:
                Apples
                Green
                Medium
                500
            
            
                2th Favourite:
                Oranges
                Orange
                Large
                450
            
            
                3th Favourite:
                Pomegranates
                Pomegranates and cherries can both come in a range of colors and size.
                203
            
            
                Joint 4th
                cherries
                75
            
            
                Poneapple
                Brown
                Very Lareg
            
        
        
        
            
                & copy; 2011 Adam Freeman Fruit Data Enterprises

Resutl of the 2011 Fruit Survey
Rank	Name	Color	Size & Votes
Favourite:	Apples	Green	Medium	500
2th Favourite:	Oranges	Orange	Large	450
3th Favourite:	Pomegranates	Pomegranates and cherries can both come in a range of colors and size.	203
Joint 4th	cherries	75
Poneapple	Brown	Very Lareg
& copy; 2011 Adam Freeman Fruit Data Enterprises

1.6.png

设置表格边框——border属性

border属性告诉浏览器这个表格是用来表示表格式数据而不是用来布置其他元素的。border属性的值必须设置为1或空字符串（“”）。

Head First HTML 示例

源码：http://www.headfirstlabs.com/books/hfhtml/chapter13/completedjournal/journal.html




    
    
        The cities I visited on my Segway'n USA travels
    
    
        City
        Date
        Temperature
        Altitude
        Population
        Diner Rating
    
    
        Walla Walla, WA
        June 15th
        75
        1,204 ft
        29,686
        4/5
    
    
        Magic City, ID
        June 25th
        74
        5,312 ft
        50
        3/5
    
    
        Bountiful, UT
        July 10th
        91
        4,226 ft
        41,173
        4/5
    
    
        Last Chance, CO
        July 23rd
        102
        4,780 ft
        265
        3/5
    
    
        Truth or Consequences, NM
        August 9th
        93
        4,242 ft
        7,289
        5/5
    
    
        August 27th
        98
        
            
                
                    Tess
                    5/5
                
                
                    Tony
                    4/5
                
            
        
    
    
        Why, AZ
        August 18th
        104
        860 ft
        480
        3/5

css示例：

table {
  margin-left:      20px;
  margin-right:     20px;
  border:           thin solid black;
  caption-side:     bottom;   // 将标题移动到表格的底部
  border-collapse:  collapse; // 消除边框之间的距离
}

td, th {
  border:           thin dotted gray;
  padding:          5px; // 单元格补白，单元格内容与边框之间的空隙
}

th {
  background-color: #cc6600;
}

caption {
  font-style:       italic; // 字体样式为斜体
  padding-top:      8px;    // 标题顶部添加补白
}

.center {
  text-align:       center;
}

.right {
  text-align:       right;
}

.cellcolor {
  background-color: #fcba7a;
}

table table th {
  background-color: white;
}

li {
  list-style-image: url(images/backpack.gif);
  padding-top:      5px;
  margin-left:      10px;
}

其他表格相关的CSS属性

属性	说明	值
border-collapse	设置相邻单元格的边框处理样式	collapse/separate
border-spacing	设置相邻单元格边框的间距	1～2个长度值
caption-side	设置表格标题的位置	top/bottom
empty-cells	设置空单元格是否显示边框	hide/show
table-layout	指定表格的布局样式	auto/fixed

111	112
1134	1126

111	112
1134	1126

111	112
1134	1126

HTML笔记 7.table表格

HTML 表格

表格中的表头

水平标题

垂直标题

跨行或跨列的表格单元格

单元格跨两格

单元格跨两列

表格内的标签

单元格边距

没有单元格边距

有单元格边距

单元格间距

没有单元格间距

单元格间距="0"

单元格间距="10"