HTML标签之table
来源:互联网 发布:sql date类型 编辑:程序博客网 时间:2024/05/16 08:29
对于table来说,在一些小的模块中进行表格布局是非常好用的。我们可以这样来理解table,主要分成table部分和td部分。
table部分:
主要是来控制外边框的(就是最外面一层边框,不包括里面部分),它拥有的属性为:margin属性,border属性,cellspacing属性,规定单元格之间的空白cellpadding属性,规定单元边沿与其内容之间的空白。
tr部分:
主要来分割有几行,一般只需要用来设定heigth。
td部分:
用来控制每个单元格的属性,可是分别控制每个单元格的上下左右边框,其中也包含padding属性。
th部分:
用法和td相同,只是用来区分表头的。
注意:
用百分比和用像素点是相同的。在table中,width指的是整个表格的宽度,而td的width值得指内部不包括内容content的宽度,这个同盒子模型。
以下用实例来说明table的一些常用布局手法:
<table bordercolor="red" border="1" class="table_3" cellpadding="10"><tr><td>11111111111111111111111</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr><tr><td>10</td><td>11</td><td>12</td></tr></table>
<table bordercolor="red" border="1" class="table_3" cellpadding="10"><tr><td>11111111111111111111111</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr><tr><td>10</td><td>11</td><td>12</td></tr></table>
注释:
border 设置所有边框的属性值 border=1 数值越小边框越细
bordercolor =”red” 指的是边框颜色为10
cellpadding :规定单元边沿与其内容之间的空白.,数值越大表格越大. (表格填充,用于隔开单元格与单元格的空间)
cellspacing=8 单元格与单元格之间的空隙距离.把表格想象成用铁丝做的一个框,cellspacing的属性值就相当于是用8格像素的厚度做的表格.(如图1)
th:定义表头,可以用来合并单元格 比如把第二行,第二三列合并.
<table bordercolor="red" border="1" cellpadding="1" cellspacing="0"> <tr> <td>11111111111111111111111</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <span style="color: #ff0000;"><th colspan="2">合并单元格</th></span> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> </tr>
如上所示:假设rowspan=2 合并两行的同时,不删除<td>10</td> 那最后一列就由3列变为4列
<table bordercolor="red" border="1" cellpadding="1" cellspacing="0"><tr><td>11111111111111111111111</td><td>2</td><td>3</td></tr><tr><td>4</td><span style="color: #ff0000;"><th colspan="2">合并单元格</th></span></tr><tr><td>7</td><td>8</td><td>9</td></tr><tr><td>10</td><td>11</td><td>12</td></tr>
colspan 是列合并 colspan=”2″ 就是合并两列
rowspan是行合并
<tr><td>11111111111111111111111</td><td>2</td><td>3</td></tr><tr><td>4</td><th colspan="2">合并单元格</th></tr><tr><<th rowspan="2">合并列</th><td>8</td><td>9</td></tr><tr><td>11</td><td>12</td></tr>
<tr> <td>11111111111111111111111</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <th colspan="2">合并单元格</th> </tr> <tr> <<th rowspan="2">合并列</th> <td>8</td> <td>9</td> </tr> <tr> <td>11</td> <td>12</td> </tr>
合并行之后,把<td>10</td> 删掉的情况
本文出自 “xinsz08の平行时空” 博客,请务必保留此出处http://xinsz08.blog.51cto.com/10565212/1946636
- HTML标签之table
- html 之 table 标签
- HTML学习之路05-table标签
- 第三节 HTML标签深入学习之Table标签
- HTML <table> 标签
- HTML <table> 标签
- HTML中的TABLE标签
- html table标签 用法
- html table表格标签
- HTML <table> 标签
- html table标签
- html table标签的使用
- HTML学习---------1.18 table标签
- HTML---01标签form,table
- html table(2)表格标签
- HTML的<table>标签基础
- HTML之TABLE应用
- HTML之table
- linux下SS命令使用
- 超市购物小票案例
- IO流--字符流写数据
- IO-字符流-FileReader
- linux系统上安装java
- HTML标签之table
- angular环境配置
- Java反射机制详解上篇
- OCLint的部分规则(Convention 部分)
- 阿里云Linux安装软件镜像源
- 反射机制详解下篇
- JDBC实现数据库的增删改查
- 在Linux上的安装Tomcat
- 关闭 TSVNCache.exe 进程