资料分享平时使用
本篇文章给大家带来的内容是关于什么是table表格？html中table表格的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
什么是表格？表格是由行和列排列而成的一种结构，按照行和列呈现数据，从而进行页面布局。这种布局方式已经过时。建议使用p+css实现页面布局。
如何创建HTML表格：HTML表格由table标签、caption标签以及一个或多个tr、th或td标签组成：
1、table标签用来定义表格，整个表格包含在
和标签中；
2、caption标签定义表格标题；
3、tr标签用来定义表格中一个行，它是单元格的容器，每行可以包含有多个单元格，由
和标签表示；
4、td标签和th标签用来定义单元格，所有单元格都在tr标签内，每个单元格由一对
和标签或一对和标签表示，具体的表格内容放置在这一对td标签或th标签之中，其语法如下：
<table> <caption>表格标题</caption> <tr> <th>1行1列的内容</th> <th>1行2列的内容</th> … </tr> <tr> <td>2行1列的内容</td> <td>2行2列的内容</td> … </tr> … </table>
注：th和td的不同：th默认是以粗体和居中的方式呈现于单元格。
1、border标签属性：设定表格边框的宽度（单位：px）；border属性会为每个单元格添加边框，并用边框围绕表格；如果 border 属性的值发生改变，那么只有表格周围边框的尺寸会发生变化，表格**的边框则是1像素宽；建议使用border样式属性设置边框，不要使用border标签属性设置边框，
2、width标签属性：设定表格的宽度，建议使用width样式属性设置表格宽度，不要使用width标签属性设置，该标签属性有多个值：
值 描述 pixels 设置以像素计的宽度（例子：width="50"）。 % 设置以包含元素的**比计的宽度（例子：width="50%"）。
3、align标签属性：**表格相对于周围标签的对齐方式，建议使用float样式属性实现该效果，该标签属性有多个值：
值 描述 left 左对齐表格。 right 右对齐表格。 center 居中对齐表格。
4、bgcolor标签属性：**表格背景颜色，建议使用background-color样式属性实现该效果，该标签属性有多个值：
值 描述 color_name 规定颜色值为颜色名称的背景颜色（比如 "red"）。 hex_number 规定颜色值为十六进制值的背景颜色（比如 "#ff0000"）。 rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 "rgb(255,0,0)"）。
5、cellpadding标签属性：设定单元格边界与单元格内容之间的间距（单位：px），建议使用padding样式属性实现对其效果
**学习“前端免费学习笔记（深入）”；
6、cellspacing标签属性：**单元格之间的间距（单位：px）
以上列出了table标签常用的标签属性，除此之外table标签还有frame、rules和summary三个标签属性，但因为frame和rules在Internet Explorer浏览器中不支持此属性，而summary标签属性不会再浏览器中产生任何视觉效果，所以这三个标签属性忽略不讲。
1、align标签属性：设置表格行中单元格内容的水平对齐方式，该标签属性有多个值：
left 左对齐内容（默认值）。 right 右对齐内容。 center 居中对齐内容。 justify 对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。 char 将内容对准**字符。注：浏览器不支持该标签属性值
2、bgcolor标签属性：设定表格行的背景颜色，建议使用background-color样式属性实现该效果，该标签属性有多个值：
值 描述 color_name 规定颜色值为颜色名称的背景颜色（比如 "red"）。 hex_number 规定颜色值为十六进制值的背景颜色（比如 "#ff0000"）。 rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 "rgb(255,0,0)"）。
3、valign标签属性：设置表格行中单元格内容的垂直对齐方式，该标签属性有多个值：
值 描述 top 对内容进行上对齐。 middle 对内容进行居中对齐（默认值）。 bottom 对内容进行下对齐。 baseline 与基线对齐。
1、align标签属性：设置单元格内容的水平对齐方式，该标签属性有多个值：
值 描述 left 左对齐内容（td标签默认值）。 right 右对齐内容。 center 居中对齐内容（th标签默认值）。 justify 对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。 char 将内容对准**字符。注：浏览器不支持该标签属性值
2、bgcolor标签属性：设定单元格背景颜色，建议使用background-color样式属性实现该效果，该标签属性有多个值：
值 描述 color_name 规定颜色值为颜色名称的背景颜色（比如 "red"）。 hex_number 规定颜色值为十六进制值的背景颜色（比如 "#ff0000"）。 rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 "rgb(255,0,0)"）。
3、valign标签属性：设置单元格内容的垂直对齐方式，该标签属性有多个值：
top 对内容进行上对齐。 middle 对内容进行居中对齐（默认值）。 bottom 对内容进行下对齐。 baseline 与基线对齐。
4、width标签属性与height标签属性：设定单元格的宽度和高度，建议使用width样式属性和height样式属性设置单元格宽度和高度，不要使用width标签属性和height标签属性设置，该标签属性有多个值：
值 描述 pixels 以像素计的宽度或高度值（比如 "100px"）。 percent 以包含元素**比计的宽度或高度值（比如 "20%"）。
5、nowrap标签属性：设定单元格的内容是否换行
6、colspan标签属性和rowspan标签属性：分别设定单元格横跨的列数和横跨的行数
使用table自带属性<table border="1">，可以直接为table内的单元格加上线条，但是单元格之间默认有边距，如果不想要的话使用cellspacing="0"清空边距，而且使用 border="1"线条会显得比较粗，所以可以使用style="border-collapse:collapse;"让其变细，以下为demo代码。
<html> <head> <meta charset="utf-8"> </head> <body> <!-------使用table自带属性border,cellspacing属性0是取消单元格之间的距离，不写style部分线条默认会比较粗---------> <table cellspacing="0" border="1" style="border-collapse:collapse;"> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
下一篇：没有了！
苏公网安备32100202010490
扫一扫 手机访问
方通-郭老师
