| html表格（table）的基本结构 | 您所在的位置：网站首页 › 表单元素的标签有哪些内容组成 › html表格（table）的基本结构 |
html表格（table）的基本结构
|
表格的基本结构
调试软件:hBuilder 简单的html表格由table元素以及一个或者多个、或元素组成。元素定义表格的行，元素定义表格的头，定义表格单元格。 更复杂的表格可能包括caption、col、colgroup、thead、tfoot、tbody等元素。 标签的属性 属性属性值说明alignleft、center、right定义表格相对周围元素的对其方式bgcolorrgb（x，x，x）、#xxxxxx、colorname定义表格的背景颜色borderpixels定义表格边框的宽度cellspacingpixels或百分比定义单元格之间的空白cellpaddingpixels或百分比定义单元边沿与其内容之间的空白summarytext定义表格的摘要widthpixels定义表格的宽度标签定义hml表格中的行，tr元素包含一个或者多个th或则td元素。 标签的属性属性 属性值说明alignright、left、center、justify、char定义表格行内容对齐方式bgcolorrgb（x，x，x）、#xxxxxx、colorname定义表格行的背景颜色charcharacter定义根据哪个字符来进行文本对齐charoffnumber定义第一个对齐字符的偏移量valigntop、middle、bottom、baseline定义表格行中内容的垂直对齐方式heightpixels、百分比定义表格的行的高度和标签的属性。标签是html表格中的标准单元格，标签是定义表格内表头单元格。th元素内部的元素文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。 和标签的属性 属性属性值说明abbrtext定义单元格中内容的缩写版本alignright、left、center、justify、char定义单元格内容的水平对齐方式axiscategory_name对单元格进行分类bgcolorrgb（x，x，x）、#xxxxxx、colorname定义单元格的背景颜色charcharacter定义根据哪个字符来进行文本对齐charoffnumber定义对齐字符的偏移量colspanNumber定义单元格可横跨的列数headersheader_cells'_id定义与单元格相关的表头heightpixels定义表格单元格的高度nowrapnowrap在 HTML 4.01 中， 的 nowrap 属性 已废弃。 nowrap 属性是一个布尔属性。 nowrap 属性规定表格单元格中的内容不换行。 rowspannumber定义单元格可横跨的行数scopecol、colgroup、row、rowgroup定义单元格内容的垂直排列方式valigntop、middle、bottom、baseline定义表格的垂直对齐方式widthpixels、百分比定义表格单元格的宽度创建包含标题的表格： 包含标题的表格 员工表 姓名 职位 薪资 李四 员工 6000元 阿华 秘书 7000元 张三 经理 15000元效果图：
创建含有跨行、列单元格的表格 使用colspan和rowspan属性来创建跨行跨列的表格。 三年级前三名学生成绩 班级 姓名 总分数 三年级二班 李明 290分 刘华 289分 三年级一班 马燕 286分效果图：
对标签进行其他属性设置，如果背景想要设置成图片用background=" 图片相对地址"。 效果图：
html5中tr本身是不能直接用bordercolor属性，要将其放在style里面才能生效。td也是如此。 title 第一行属性 第一行属性 第二行属性 第二行属性效果图：
对于标签的width和height的设置一定要注意。具体如下： width：某一个标签的width和他所处的一列中的每个的width都有关，取其最大的width作为这一列中的每个的width。 height：某一个标签的height和他所处的一行中的每个的height都有关，取其最大的heigh作为这一行中的每个的heigh。 title 设置表格的单元属性 设置表格的单元属性 设置表格的单元属性 设置表格的单元属性 设置表格的单元属性 设置表格的单元属性效果图：
设置单元格的背景色，边框颜色 注意：td本身是不能直接用bordercolor属性，要将其放在style里面才能生效。 tr无法直接设置表格边框线的大小，要通过td本身设置，但是可以设置表格行的颜色。 title .mytable td{ border-width: 5px; } 设置表格的单元格属性 设置表格单元格属性 设置表格的单元格属性 设置表格的单元格属性效果图：
设置单元格的亮边框和暗边框 bordercolorlight属性用于定义亮边框，bordercolordark属性用于定义暗边框。但是两者并不是字面意思，一般是针对表格的（包括表格中的行和单元格），表格的边框默认都是4个边框。其中亮边框属性设置的一般是左边框、上边框，暗边框设置的是下边框、右边框，必须在IE浏览器上浏览。 亮和暗 练习：设计表格标题的样式border-radius 边框半径。 它是一个设置所有四个属性border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius和border-top-right-radius的简写。如果值在斜杠之前和之后给出，那么斜杠之前的值设置水平半径，斜杠之后的值设置垂直半径。如果没有斜杠，那么值设置两个半径相等。每个半径的四个值按左上、右上、右下、左下的顺序给出。如果省略左下，则与右上相同。如果省略右下角，则与左上角相同。如果省略top-right，则与top-left相同。 下面是两个典型使用border-radius属性的例子。因为在border-radius属性之后有两个值，第一个值是定义元素的左上角和右下角的圆的半径，第二个值是定义元素的左上角和左下角的圆的半径。 border-radius ：30px 30px ; 效果图：
border-radius:30px/50px; 效果图：
效果图：
|
【本文地址】