html的table属性笔记

<table cellpadding="10px" border="1px" cellspacing="5px"><!--定义表格表头--><tr><th>名字</th><th>单位</th><th>电话</th><th>编号</th></tr><!--定义表格内容--><tr><td>恵涛</td><td>seer</td><td>15829241349</td><td>1</td></tr>
</table>

效果：

table增加标题：

<table cellpadding="10px" border="1px" cellspacing="5px" ><!--定义表格标题--><caption> 单位介绍</caption><!--定义表格表头--><tr><th>名字</th><th>单位</th><th>电话</th><th>编号</th></tr><!--定义表格内容--><tr><td>恵涛</td><td>seer</td><td>15829241349</td><td>1</td></tr>
</table>

colspan列合并

<table cellpadding="10px" border="1px" cellspacing="5px" ><!--定义表格标题--><caption> 单位介绍</caption><!--定义表格表头--><tr><th>名字</th><th>单位</th><th>电话</th><th>编号</th></tr><!--定义表格内容--><tr><td>恵涛</td><td>seer</td><td colspan=2>15829241349</td><td>1</td></tr>
</table>

rowspan行合并：

<table cellpadding="10px" border="1px" cellspacing="5px" ><!--定义表格标题--><caption> 单位介绍</caption><!--定义表格表头--><tr><th>名字</th><th>单位</th><th rowspan="2">电话</th><th>编号</th></tr><!--定义表格内容--><tr><td>恵涛</td><td>seer</td><td>15829241349</td><td>1</td></tr><tr><td>恵涛</td><td>seer</td><td>15829241349</td><td>1</td></tr>
</table>

表格中包涵表格：

<table cellpadding="10px" border="1px"  ><!--定义表格标题--><caption> 单位介绍</caption><tr><td><table border="1px"><!--定义表格表头--><tr><th>名字</th><th>单位</th><th>电话</th><th>编号</th></tr><!--定义表格内容--><tr><td>恵涛</td><td>seer</td><td>15829241349</td><td>1</td></tr><tr><td>恵涛</td><td>seer</td><td>15829241349</td><td>1</td></tr></table></td></tr>
</table>

效果图：

table的td宽度都设置成一样的：

<table cellpadding="10px" border="1px"  ><!--定义表格标题--><caption> 单位介绍</caption><tr><td><table border="1px"><!--定义表格表头--><tr><th width="100px">名字</th><th width="100px">单位</th><th width="100px">电话</th><th width="100px">编号</th></tr><!--定义表格内容--><tr><td width="100px">恵涛</td><td width="100px">seer</td><td width="100px">15829241349</td><td width="100px">1</td></tr><tr><td width="100px">恵涛</td><td width="100px">seer</td><td width="100px">15829241349</td><td width="100px">1</td></tr></table></td></tr>
</table>

效果图：

表格属性：

tr	是行，有几个就是几行，包括着td标签
caption	表格的标题
td	是列，有几个就是几列
th	是加粗行的列的开头，同td的位置一样，都是被td包
border	代表边框，数字为0，就没有边框，数字越大，边框越宽
cellspacing	单元格之间的间距
cellpadding	单元格和外边框的距离
bgcolor	背景颜色
align	位置
rowspan	行合并
colspan	列合并

后期会继续添加！

html的table属性笔记相关推荐

【前端笔记】BootStarp的table属性跨行跨列后无法居中
解决问题引用BootStarp的table属性跨行跨列后无法居中. html代码如下(table为bootstarp属性): <head><link rel="style ...
css列表格式属性,css list-style-type属性笔记
list-style-type属性定义及用法在css中,list-style-type属性是使用来设置列表项标记的类型,在有序列表和无序列表中经常都会使用该属性. 目前,所有主流浏览器都支持list ...
elementUI表格table的列内置样式修改方法/对比template，列属性class-name，table属性cell-class-name
1,table属性cell-class-name的使用可以作用到某一行,或者某一列等等.但是在style标签中要去掉scoped,不然无效. (在elementUI中,row-class-name ...
asp.net Table 属性
前言在内容设置完成后,要把表格去掉,毕竟没有那个网站用表格显示的. 视频中就用一行代码来完成的(如下) BorderWidth ="0" 就是把表格线的宽度设置为0 但是我不管怎 ...
vue：遇到的坑之-----table属性（element-ui）
主要记录一下项目中常用到的table属性 1.stripe:是否显示斑马纹 <el-table :stripe="true"> </el-table> // ...
表格（table属性、th/td属性、单元格合并）
表格现在HTML 表格应该用于表格数据语法:表格的容器<table>行<tr><td>普通单元格</td><th>表头单元格</ ...
CSS display:table属性用法解析
本节和大家重点讨论一下CSS display:table的使用,当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值,CSS表格能够解决所有那些我们在使用绝对定位和浮动 ...
iview中Table属性中的on-row-click属性
iview中Table属性中的on-row-click属性 on-row-click属性,在此后台系统中用来从左侧的table中选中一项,作为值传递给右侧的表格,右侧表格从拿到的数据,渲染出对应的列表 ...
java中table属性_div实现table功能
div布局主要用到的css属性 table 此元素会作为块级表格来显示(类似 table-row-group 此元素会作为一个或多个行的分组来显示(类似 ). table-header-g ...

html的table属性笔记

html的table属性笔记相关推荐

最新文章

热门文章