表格 - 表格新增标签

表格

            作用:是用来展示用户信息的;显示的区域比较横平竖直,比较整齐划一

            应用场景: 后台管理系统, 大部分都在使用; 比较整齐划一的网站,用来展示信息的时候

            基本语法:

                <table>

                    <tr>

                        <td>文本/其他的标签</td>

                    </tr>

                </table>

                table=====表格

                tr========表格的行,一个tr代表的是一行;

                td========表格的单元格,表格的列,一个td代表的是一行里面的一列

            如何创建一个表格

            表格的标签属性

                1)table的标签属性               

                         1)边框属性

                                border="1"

                                注意:给table添加边框的时候,td也会出现1px的边框

                          2)宽度和高度(*)

                                width=""

                                height=""

                                注意:1)可以设置宽度高度,没有单位的话默认是以px为单位的

                                        2)宽度可以直接设置百分比, 但是高度不能直接设置;参照父元素的高度,进行百分比的实现;

                                注意事项:

                                    默认情况下,单元格里面的内容,数量一致的话,则宽度高度默认是均分的;但凡不一致,则宽度高度不一样

                            3)背景颜色

                                bgcolor="red"

                            4)表格的水平对其方式

                                align="left/right/center"

                            5)调整单元格与单元格之间的缝隙(*)

                                cellspacing="数值"

                            6)调整单元格与内容之间的缝隙(*)

                                cellpadding="数值"

                            7)边框的颜色

                                bordercolor="red"

                            8)表格的内边框线(表格的横纵线)

                                rules="rows/cols"

                                rows===横向的边框线

                                cols===纵向的边框线

                            9)表格的外边框线条(最外边的一圈)

                                frame=""

                                    above;=====上外边框线

                                    below;=====下外边框线

                                    lhs;=======左边框线(left horizontal side)

                                    rhs;=======右边框线(right horizontal side)

                2)tr的标签属性

                    1)高度属性

                        height="设置的是一整行单元格的高度"

                    2)背景颜色

                        bgcolor="red"

                        设置的是一整行单元格的颜色

                    3)表格行中单元格的对其方式

                        a)设置一整行单元格的文本水平对其

                            align="left/right/center"

                        b)设置一行单元格的的文本垂直对其

                            valign="top/bottom/middle"

                3)td的标签属性                    

                注意事项:如果你单元格里面的内容数量一致的话,则宽度高度是默认均分的;

                    1)宽度和高度属性

                        给单元格设置宽度,会影响该单元格所在的一整列单元格的宽度

                        给单元格设置高度,会影响该单元格所在的一整行单元格的高度

                    2)背景颜色

                        bgcolor="red"

                    3)对其方式

                        设置的是整个单元格的对其方式

                        align=""

                        valign=""

                            最重要的两个属性(*******)单元格的合并属性

                        4)水平合并单元格

                            横向合并,只在本行中操作,跨的是列,从第几列到第几列,总共多少列

                            colspan="数值"

                        5)垂直合并单元格

                            纵向合并,需要去其他的行中进行操作,跨的是行,从第几行到第几行,总共多少行

                            rowspan="数值"

        css属性

                1)边框属性 

                    border:1px solid gray;

                2)调整单元格与单元格之间的间距 cellspacing 

                    border-spacing: 0px; 

                3)实现1px的边框=边框线合并

                    问题: 

                    border-collapse: collapse; 

                4)表格的布局算法:面试题(出现的频率比较低)

                根据你内容多少, 是否重新撑大表格, 是否重新计算表格的大小

                属性:table-layout 区别和优缺点

                auto:自动

                    优点:能根据文本多少进行撑大放小表格的宽度,灵活性比较高

                    缺点:如果你设置自动的话,每次浏览器刷新的时候都会重新加载计算渲染表格的大小,

                fixed:固定

                    优点:如果你设置固定的话,每次浏览器刷新的时候,不会重新计算渲染大小

                    缺点:灵活性不高

                      table-layout: fixed; 

            表格的CSS属性(***重点***重点)

                标签属性和CSS属性的区别:

                标签属性, 属性和属性值需要使用等号链接, 放在标签里面;

                CSS属性, 属性和属性值需要使用冒号链接, 放在对应的CSS语法中;

表格里面的新增标签

         1)表格的标题

            caption标签,双标签

            位置:table里面,第一个tr出现的位置之前;

        2)直接使用自带选择器的时候找不到td?

            原因:若果你再使用表格布局的时候,没有使用行分组标签, 默认浏览器会自行给你创建一个tbody的行分组,

            并且吧所有的tr放在这个tbody里面

            注意:

                总共有三个:行分组标签

                tbody======表格主体

                thead======表格头部

                tfoot======表格尾部

            使用的时候, 注意为了避免与浏览器中的tbody冲突, 我们推荐使用行分组标签;这样能精准的匹配元素

            使用的时候, 注意,一个表格里面可以有多个主体,但是只能有一个头部,一个尾部;

        3)表格的列分组标签

            <colgroup span="让多少列划分成一组"></colgroup>

        4)表格里面的标题行,标题列单元格标签

            th等价替换的是td

            两个标签可以混合使用

            实现的效果: 加粗居中