H5表格的属性
2017-03-20 07:51
225 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="5px" cellspacing="5px" bordercolor="blue" width="200px" height="50px"
style="background: 100%;background-image:
url('../../img/logo.png')" align="center">
<!--属性
1：border 给表格添加边框 当border数值增大是，只有外围框线增加，单元格的边框是种为1px
2：bordercolor 边框颜色
3：width heigth表格宽高
4：cellspacing:单元格于单元格之间的间隙距离，当cellspacing=0，只会使单元格间隙为0，
但不会合并边框线,如果要合并边框线用 style="border-collapse: collapse"（不推荐在h5
使用，h5向下兼容
5：cellpadding 每个单元格中内容和边框的距离
6：align：表格在屏幕的左中位置显示，left center
注意
7：bgcolor 背景颜色 或者在style中用background去修改
8：背景图片 background 背景图片会覆盖北京颜色）-->
<tr bgcolor="aqua" align="center">
<td nowrap="nowrap ">手机充值手机充值手机充值手机充值</td>
<td>IP卡</td>
<td>网游</td>
</tr>
<!-- tr td属性
1 也有宽高
2 bgcolor 单元格的背景颜色
3 align left center right 单元格中的文字，水平对齐方式
4： valign： top bottom center 单元格中的文字，垂直对齐方式
5：nowrap='nowrap' 单元格中文字不换行
注意 1：当表格实行与行列属性冲突是 以行列属性为准（近者优先，就近原则）
-->
<tr bgcolor="#f0ffff" width="10px" height="30px" align="center" nowrap="nowrap" >
<td valign="top"><移动手机充值手机></移动手机充值手机>充值手机充值</td>
<td nowrap="nowrap">联手机充值手机充值通</td>
<td nowrap="nowrap">电信</td>
</tr>
</table>
<br/>
<br/>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>数学成绩</th>
<th>语文成绩</th>
<th>英语成绩</th>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>100</td>
<td>120</td>
<td>888</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>33</td>
<td>333</td>
<td>33</td>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>100</td>
<td>120</td>
<td>120</td>
</tr>
</table>
<br/>
<table border="2px">
<tr>
<td>第一行第一列</td>
<td colspan="3">第一行跨三列</td><!--colspan占3列-->
</tr>
<tr>
<td rowspan="3">第二行跨三行</td><!--rowspan占3行-->
<td>第二列</td>
<td>第三列</[b]td>
<td>第四列</td>
</tr>
<tr>
<td>技术</td>
<td>掘金</td>
<td>手机</td>
</tr>
<br/>
<table border="1" align="center">
<tr>
<td colspan="4" valign="center">jfajajaj</td>
</tr>
<tr>
<td>fas</td>
<td>das</td>
<td>sda</td>
<td>sdas</td>
</tr>
<tr>
<td>sad</td>
<td>dasd</td>
<td>sdaa</td>
<td>sdad</td>
</tr>
<tr>
<td colspan="2" valign="center">dasd</td>
<td colspan="2" valign="center">fasda</td>
</tr>
<tr>
<td>fass</td>
<td>fass</td>
<td>fass</td>
<td>fass</td>
</tr>
<tr>
<td>fsgd</td>
<td>fsgd</td>
<td>fsgd</td>
<td>fsgd</td>
</tr>
<tr>
<td colspan="3" valign="center">fas</td>
<td>sda</td>
</tr>
<tr>
<td>sdas</td>
<td>sdas</td>
<td>sdas</td>
<td>sdas</td>
</tr>
<tr>
<td>gdgdf</td>
<td>gdgdf</td>
<td>gdgdf</td>
<td>gdgdf</td>
</tr>
</table>
</table>
<br/>
<table border="1" align="center" bgcolor="#8a2be2" >
<tr>
<td rowspan="2" width="50px">sdsd</td>
<td>sda</td>
<td>sda</td>
</tr>
<tr>
<td>qwer</td>
<td>qwer</td>
</tr>
<tr>
<td rowspan="2">rty</td>
<td>qwr</td>
<td>qwr</td>
</tr>
<tr>
<td>qwer</td>
<td>qwer</td>
</tr>
</table>
<br/>
<table border="1" align="center" bgcolor="aqua">
<tr>
<td rowspan="6" width="100px" style="background-image: url('../../img/ie.jpg')">www</td>
<td rowspan="3">dsa</td>
<td rowspan="2">sada</td>
<td>dasd</td>
</tr>
<tr>
<td>sda</td>
</tr>
<tr>
<td rowspan="2">asdas</td>
<td>sda</td>
</tr>
<tr>
<td rowspan="3">dwq</td>
<td>wqw</td>
</tr>
<tr>
<td rowspan="2">wq</td>
<td>dwa</td>
</tr>
<tr>
<td>adas</td>
</tr>
</table>
<table border="1" align="center">
<!--colgroup-->
<caption>我是表格头</caption>
<tr>
<td colspan="2">wdas</td>
</tr>
<tr>
<td rowspan="4" width="50px">sda</td>
</tr>
<tr>
<td width="50px">dsa</td>
</tr>
<tr>
<td>sd</td>
</tr>
<tr>
<td>sd</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 疯狂H5笔记 - 表格、列表相关属性及media query
- H5自身的属性
- H5 20-属性选择器上
- jQuery中动态设置表格的属性
- [ExtJS5学习笔记]第十五节 Extjs5表格显示不友好？panel的frame属性在作怪
- 不用table仅用div标签，利用CSS3的Flexbox属性，实现跨行和跨列的表格或网格
- 利用display属性写出表格的布局样式
- 繁星H5之旅-HTML5表单新增元素与属性
- 表格 CSS（不换行） HTML <td> 标签的 nowrap 属性
- iOS UITableView去掉多余表格线，tableView去掉表头空白、改变导航栏背景色和标题属性
- extjs 属性表格取消默认排序
- H5表单属性(持续添加)
- HTML表格标记教程(9):单元格间距属性CELLSPACING
- HTML表格标记教程(13):内部边框样式属性RULES
- HTML表格标记教程(10):单元格边距属性CELLPADDING
- 动态设置表格属性
- CSS display属性的table表格布局
- CSS2 样式表(属性·表格)
- 21、H5新增js属性之JSON新方法
- jquery easyui DataGrid 数据表格 属性