06 - table表格标签+ 行合并+列合并

简介: 06 - table表格标签+ 行合并+列合并

1、table  表格标签属性


cellspacing="0"  表格边框合并;

表格:table

     行:tr

     列:td

属性:

     border:边框

     width:宽

     height:高

     bordercolor:变宽颜色

     cellspacing:单元格与单元格之间的距离

     cellpadding:单元格与内容之间的距离

     align:水平的对齐方式,left|center|right

 

1. <table
2. 
3. border="1"
4. 
5. width="300"
6. 
7. height="200"
8. 
9. bordercolor="red"
10. 
11. cellspacing="0"
12. 
13. cellpadding="0"
14. 
15. align="center"
16. 
17. >
18. 
19. <tr>
20. 
21. <td align="center">1</td>
22. 
23. <td>2</td>
24. 
25. <td>3</td>
26. 
27. </tr>
28. 
29. <tr>
30. 
31. <td>21</td>
32. 
33. <td>22</td>
34. 
35. <td>23</td>
36. 
37. </tr>
38. 
39. </table>
40.

 

2、行合并

1. <!-- table>tr*3>td*3 -->
2. 
3. <table border="1" width="600" height="300" cellspacing="0">
4. 
5. <tr>
6. 
7. <td></td>
8. 
9. <td></td>
10. 
11. <!--
12. 
13. 表格合并:行合并(rowspan),列合并(colspan)
14. 
15. 不管是行合并还是列合并,都是给td添加
16. 
17. 如果是行合并,就删除下一行对应td
18. 
19. -->
20. 
21. <td rowspan="3"></td>
22. 
23. </tr>
24. 
25. <tr>
26. 
27. <td></td>
28. 
29. <td></td>
30. 
31. <!-- <td></td> -->
32. 
33. </tr>
34. 
35. <tr>
36. 
37. <td></td>
38. 
39. <td></td>
40. 
41. <td></td>
42. 
43. </tr>
44. 
45. </table>

 

3、列合并

1. <table border="1" width="600" height="300" cellspacing="0">
2. 
3. <tr>
4. 
5. <!--
6. 
7. 列合并:
8. 
9. 删除本行下面的td
10. 
11. <td colspan="n"></td>
12. 
13. 需要删除的就是n-1 td
14. 
15. -->
16. 
17. <td></td>
18. 
19. <td colspan="2"></td>
20. 
21. <!-- <td></td> -->
22. 
23. </tr>
24. 
25. <tr>
26. 
27. <td></td>
28. 
29. <td></td>
30. 
31. <td></td>
32. 
33. </tr>
34. 
35. <tr>
36. 
37. <td></td>
38. 
39. <td></td>
40. 
41. <td></td>
42. 
43. </tr>
44. 
45. </table>
46. 
47. 
48.


相关文章
|
7月前
用dragstart、drag、dragend、dragover、drop、dragleave实现针对表格列的顺序进行拖拽排序(附带实现选择某几列数据显示或隐藏)
用dragstart、drag、dragend、dragover、drop、dragleave实现针对表格列的顺序进行拖拽排序(附带实现选择某几列数据显示或隐藏)
|
7月前
|
小程序
06 - table表格标签+ 行合并+列合并
06 - table表格标签+ 行合并+列合并
133 0
|
SQL
一条集多表查询、字段与字段拼接、合并每张表共同字段、新增列并赋值的SQL
一条集多表查询、字段与字段拼接、合并每张表共同字段、新增列并赋值的SQL
71 0
|
存储 API
【ElementUI】Table表格动态合并
【ElementUI】Table表格动态合并
259 0
|
前端开发
Bootstrap - 列排序,列偏移,列嵌套
Bootstrap - 列排序,列偏移,列嵌套
101 0
|
Python
【Excel自动化办公Part2】:向某个格子里写入内容、append()插入行、在表格中插入公式、插入行和列、删除行和列、移动格子
【Excel自动化办公Part2】:向某个格子里写入内容、append()插入行、在表格中插入公式、插入行和列、删除行和列、移动格子
231 0
【Excel自动化办公Part2】:向某个格子里写入内容、append()插入行、在表格中插入公式、插入行和列、删除行和列、移动格子
|
C++ 索引
C/C++编程题之合并表记录
C/C++编程题之合并表记录
DataTable 修改列名 删除列 调整列顺序
DataTable 修改列名 删除列 调整列顺序
216 0
|
数据库管理
sqlite实用技巧:查询表数据时,使用列对齐,显示表头
sqlite实用技巧:查询表数据时,使用列对齐,显示表头
sqlite实用技巧:查询表数据时,使用列对齐,显示表头

热门文章

最新文章