HTML&CSS基础学习笔记1.15-合并单元格
来源:互联网 发布:windows ctypes64 编辑:程序博客网 时间:2024/05/17 22:15
合并单元格
之前的文章中,我们已经能够创建一个简单地表格了,如果我们需要把横向的某两个相邻单元格<td>或者纵向的某两个相邻单元格<td>合并,我们该怎么做呢?我们要知道的知识点如下:
1.标签<td>的[colspan]属性规定单元格可横跨的列数,即横向合并的单元格数;
2.标签<td>的[rowspan] 属性规定单元格可横跨的行数,即纵向合并的单元格数;
3.这2个标签也可以同时使用。
样式示例:
现在就来试试合并单元格吧:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>创建一个多行多列的表格</title></head><body><h1>创建一个多行多列的表格</h1><table border="1"> <tr><td colspan="2">第一个单元格</td><td>第二个单元格</td><td>第三个单元格</td></tr> <tr><td rowspan ='2'>第四个单元格</td><td>第五个单元格</td><td>第六个单元格</td></tr> <tr><td>第七个单元格</td><td>第八个单元格</td><td>第九个单元格</td></tr></table></body></html>
结果是这样的:
更多学习内容,请前往http://www.mayacoder.com/lesson/index
0 0
- HTML&CSS基础学习笔记1.15-合并单元格
- HTML&CSS基础学习笔记1.16-单元格间距和表格主体
- HTML&CSS 高级表格 合并单元格
- ireport 学习笔记-单元格合并
- HTML+CSS零基础学习笔记
- 《HTML+CSS基础课程》学习笔记一
- 《HTML+CSS基础课程》学习笔记二
- 《HTML+CSS基础课程》学习笔记三
- 《HTML+CSS基础课程》学习笔记四
- 《HTML+CSS基础课程》学习笔记五
- 《HTML+CSS基础课程》学习笔记六
- 《HTML+CSS基础课程》学习笔记七
- 《HTML+CSS基础课程》学习笔记八
- 《HTML+CSS基础课程》学习笔记九
- 《HTML+CSS基础课程》学习笔记十
- 【慕课网】HTML&CSS基础课程学习笔记
- html+css基础笔记
- html+css基础笔记
- JavaScript学习笔记二十五:操作表单
- nyoj 蚂蚁的难题(二)745
- Wifi小车之 - 无线路由串口调试篇
- Java IO最详解
- 安卓端打电话和发送短信
- HTML&CSS基础学习笔记1.15-合并单元格
- android studio入门
- HDU 5723(mst+dfs)
- 打包时出现的':app:validateExternalOverrideSigning'问题
- 苹果导出P12文件
- maven的多环境打包部署与web.xml整合
- 1001. 害死人不偿命的(3n+1)猜想 (15)
- neural-networks-and-deep-learning test.py
- DHCP与PPPOE 区别