Table元素的使用

创建表格使用table元素

table元素有以下常用的属性

属性	含义
border	设置表格的边框宽度
width	设置表格的宽度
height	设置表格的长度
cellpadding	设置表格的内边距
cellspacing	设置表格的外边距

table里面的元素

元素	含义
caption	表标题
th	表名
tr	表行
td	单元格
thead	区分表格的头部
tbody	区分表格的主体
tfood	区分表格的底部
colgroupp、col	设置不同的列的样式颜色

td元素的属性

属性	含义
colspan	设置单元格跨行
rowspan	设置单元格跨列

示例：

<div style="margin: 30px 500px auto;text-align: center"><table border="1" width="300" ><thead><caption>职业调查</caption><th colspan="3">详情表</th></thead><tbody><colgroup><col bgcolor="#f79d03"><col bgcolor="#ffd4f5"><col bgcolor="e80063"></colgroup><tr><td>姓名</td><td>职业</td><td>性别</td></tr><tr><td>小明</td><td>学生</td><td>男</td></tr><tr><td>张三</td><td>教师</td><td>男</td></tr><tr><td>静静</td><td>教师</td><td>女</td></tr></tbody><tfoot><tr><td colspan="3">总计3人</td></tr></tfoot></table>
</div>

结果

表格的内外边距默认是不合并的要使用单边框表格需要使用

border-collapse : collapse 其属性值

示例：

<style>table,td{border: 1px solid #0D9AFE;}table{width: 1000px;height: 400px;/*border-collapse: collapse属性，用于合并表格边框*/border-collapse: collapse;margin: 0 auto;text-align: center;background-color: #1f79a7;}
</style>
<body><table><tr><td colspan="5">学生管理信息表</td></tr><tr><td >id</td><td>姓名</td><td>年龄</td><td>性别</td><td>爱好</td></tr><tr><td>id</td><td>姓名</td><td>年龄</td><td>性别</td><td>爱好</td></tr></table>
</body>

结果图

Table元素的使用相关推荐

html表格怎么改圆角边框,Table元素设置圆角border
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? Table元素设置圆角border-radius 首先,我们先对border-collapse属性进行简单的了解. 有以 ...
使用table元素写一个个人简历表格
使用table元素写一个表格模仿下面的表格用html完成相同样式思路将上面的表格分为四个表格分别为tb1,tb2,tb3,tb4 分为上下两部分两个div块来装表格利用浮动将tab2浮动到tb1 ...
golang gopher-lua 遍历table元素
前言 gopher-lua中也有c++中的lua.next函数,不过目前我没有查到gopher-lua的next函数用法,因此这里用的是func (ls *LState) ForEach(tb *LT ...
将标准 HTML table元素转换为Tabulator表
可以将标准 HTML 表格元素转换为Tabulator,在创建表格时将所有数据直接从表格拉入制表器. 如果要从表中提取列标题,则需要确保已定义thead元素,每个列标题都在th元素.如果指定width ...
GoJS中Panels的Table元素
GoJS绘制图表一般分为三步:第一步.定义画布:第二步.定义节点:第三步.定义连线. 如上图所示,如果在节点中我们要绘制一个含有表格的图表,那么这个表格该怎么绘制呢思路如下: 分成两个部分,第一个部 ...
关于table的中元素对齐方式的注意点
情形一:<td></td>中嵌套了div或table元素. 1.td中的内部元素(如div)设置了height属性,td中设置了vertical-align的情况下,在IE中, ...
html中表格元素的英文,HTML中表格元素TABLE,TR,TD及属性的语法
table:表格元素及属性属性说明 width 表格宽度,单位为%或象素 border 表格边框线的粗细 cellspacing 表格间距 cellpadding 表格边距 ...
Bootstrap学习记录-2.container和table
1. Container Bootstrap中容器类提供了2个类标识:container.container-fluid. 两者的区别在于: container:容器不止有15px的padding,还 ...
table标签修改tr,td标签的行距
修改tr标签的行距,tbale标签的td标签间距看如下Css文件的代码,其都没有table的tr行距产生效果 tr{margin-top: 10px;padding: 10px; } td{marg ...

Table元素的使用

创建表格使用table元素

table元素有以下常用的属性

table里面的元素

td元素的属性

示例：

结果

表格的内外边距默认是不合并的要使用单边框表格需要使用

border-collapse : collapse 其属性值

示例：

结果图

Table元素的使用相关推荐

最新文章

热门文章