如何在HTML里用COLSPAN调整单元格宽度

orangemon 2011-10-04 07:46:23

我在看别人的网页中遇到了一个问题，这个网页包含了一个表格，而表格里各个单元格的宽度是用colspan来调整的

问题是：
第一行只有一个单元格，colspan=10
第二行三个单元格，colspan=4，colspan=3，colspan=3
第三行还是一个单元格，colspan=10
第四行三个单元格，colspan=4，colspan=3，colspan=3

现在发现第四行的单元格长度和第二行的不一样，是不是各行之间有依赖关系？
并且代码里并没有说colspan=1时单元格的长度，那么如何计算colspan=N的长度呢？

谢谢！

...全文

668 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

bear63 2011-10-05

打赏
举报

回复

恭喜自己解决了。

哈哈，那送分吧。。。

orangemon 2011-10-04

打赏
举报

回复

找到原因了，我自己直接结贴吧

第1篇 HTML基础　　第1章 HTML基础 3 　　教学录像：22分钟　　1.1 HTML的基本概念 4 　　1.2 HTML发展史 4 　　1.3 HTML的基本结构 5 　　1.3.1 HTML文件的编写方法 5 　　1.3.2 文件开始标签<html> 7 　　1.3.3 文件头部标签<head> 7 　　1.3.4 文件标题标签<title> 7 　　1.3.5 文件主体标签<body> 7 　　1.3.6 编写文件的注意事项 8 　　1.4 编写第一个HTML文件 8 　　1.4.1 HTML文件的编写方法 8 　　1.4.2 手工编写页面 9 　　1.4.3 使用可视化软件制作页面 10 　　1.4.4 使用浏览器浏览HTML文件 14 　　1.4.5 使用HTML开发的明日图书网 14 　　1.5 小结 15 　　1.6 习题 16 　　第2章 HTML文件基本标记 17 　　教学录像：44分钟　　2.1 HTML头部标记 18 　　2.2 标题标记<title> 18 　　2.3 元信息标记<meta> 19 　　2.3.1 设置页面关键字 19 　　2.3.2 设置页面描述 20 　　2.3.3 设置编辑工具 20 　　2.3.4 设定作者信息 21 　　2.3.5 限制搜索方式 22 　　2.3.6 设置网页文字及语言 22 　　2.3.7 设置网页的定时跳转 23 　　2.3.8 设定有效期限 24 　　2.3.9 禁止从缓存中调用 24 　　2.3.10 删除过期的cookie 25 　　2.3.11 强制打开新窗口 25 　　2.3.12 设置网页的过渡效果 26 　　2.4 基底网址标记<base> 29 　　2.5 页面的主体标记<body> 30 　　2.5.1 设置文字颜色——text 31 　　2.5.2 背景颜色属性——bgcolor 32 　　2.5.3 背景图像属性——background 32 　　2.5.4 设置链接文字属性——link 35 　　2.5.5 设置边距——margin 37 　　2.6 页面的注释标记 38 　　2.7 实例演练——创建基本的HTML网页 38 　　2.8 小结 39 　　2.9 习题 40 　　第3章设计网页文本内容 41 　　教学录像：29分钟　　3.1 标题文字的建立 42 　　3.1.1 标题文字标记<h> 42 　　3.1.2 标题文字的对齐方式——align 43 　　3.2 设置文字格式 44 　　3.2.1 设置文字字体——face 44 　　3.2.2 设置字号——size 45 　　3.2.3 设置文字颜色——color 46 　　3.2.4 粗体、斜体、下划线——strong、em、u 46 　　3.2.5 上标与下标——sup、sub 47 　　3.2.6 设置删除线——strike 48 　　3.2.7 等宽文字标记——code 49 　　3.2.8 空格——  49 　　3.2.9 其他特殊符号 50 　　3.3 设置段落格式 51 　　3.3.1 段落标记——p 51 　　3.3.2 取消文字换行标记——nobr 52 　　3.3.3 换行标记——br 53 　　3.3.4 保留原始排版方式标记——pre 53 　　3.3.5 居中对齐标记——center 54 　　3.3.6 向右缩进标记——blockquote 55 　　3.4 水平线标记 56 　　3.4.1 添加水平线——hr 56 　　3.4.2 设置水平线的宽度与高度　　——width、height 57 　　3.4.3 设置水平线的颜色——color 58 　　3.4.4 设置水平线的对齐方式——align 59 　　3.4.5 去掉水平线阴影——noshade 60 　　3.5 其他文字标记 60 　　3.5.1 文字标注标记——ruby 60 　　3.5.2 声明变量标记——var 61 　　3.5.3 忽视HTML标记　　——plaintext、xmp 62 　　3.6 小结 63 　　3.7 习题 63 　　第4章使用列表 65 　　教学录像：35分钟　　4.1 列表的标记 66 　　4.2 使用无序列表 66 　　4.2.1 无序列表标记——ul 66 　　4.2.2 无序列表的符号类型——type 67 　　4.3 使用有序列表 69 　　4.3.1　有序列表标记——ol 69 　　4.3.2　有序列表的属性——type 70 　　4.3.3　有序列表的起始数值——start 72 　　4.4 定义列表标记——dl 73 　　4.5 菜单列表标记——menu 74 　　4.6 目录列表——dir 75 　　4.7 使用嵌套列表 76 　　4.7.1　定义列表的嵌套 77 　　4.7.2　无序列表和有序列表的嵌套 78 　　4.8 小结 79 　　4.9 习题 80 　　第5章超链接 81 　　教学录像：22分钟　　5.1 超链接的基本知识 82 　　5.1.1 超链接 82 　　5.1.2 绝对路径 82 　　5.1.3 相对路径 82 　　5.2 超链接的建立 83 　　5.2.1 超链接标记的基本语法 83 　　5.2.2 建立文本超链接 83 　　5.2.3 设置超链接的目标窗口 85 　　5.3 内部链接 87 　　5.4 书签链接 89 　　5.4.1 建立书签 89 　　5.4.2 链接到同一页面的书签 91 　　5.4.3 链接到不同页面的书签 92 　　5.5 外部链接 93 　　5.5.1 通过HTTP协议 94 　　5.5.2 通过FTP 94 　　5.5.3 发送E-mail 95 　　5.5.4 下载文件 96 　　5.6 其他链接 98 　　5.6.1 脚本链接 98 　　5.6.2 空链接 99 　　5.7 小结 99 　　5.8 习题 100 　　第6章使用图像 101 　　教学录像：35分钟　　6.1 图像的基本格式 102 　　6.2 添加图像——img 102 　　6.3 设置图像属性 103 　　6.3.1 图像高度——height 103 　　6.3.2 图像宽度——width 104 　　6.3.3 图像边框——border 105 　　6.3.4 图像水平间距——hspace 107 　　6.3.5 图像垂直间距——vspace 108 　　6.3.6 图像相对于文字基准线的对齐方式　　——align 108 　　6.3.7 图像的提示文字——alt 110 　　6.4 图像的超链接 111 　　6.4.1　设置图像的超链接 111 　　6.4.2　设置图像热区链接 112 　　6.5 小结 116 　　6.6 习题 116 　　第7章表格的应用 118 　　教学录像：48分钟　　7.1　创建表格 119 　　7.1.1　表格的基本构成——table、tr、td 119 　　7.1.2　表格的标题——caption 120 　　7.1.3　表格的表头——th 121 　　7.2　设置表格基本属性 123 　　7.2.1　表格的宽度——width 123 　　7.2.2　表格的高度——height 125 　　7.2.3　表格的对齐方式——align 126 　　7.3　设置表格的边框 127 　　7.3.1　表格边框的宽度——border 127 　　7.3.2　表格边框的颜色——bordercolor 128 　　7.3.3　表格内框的宽度——cellspacing 130 　　7.3.4　表格内文字与边框的间距　　——cellpadding 131 　　7.4　设置表格背景 132 　　7.4.1　表格的背景颜色——bgcolor 132 　　7.4.2　表格的背景图像——background 133 　　7.5　设置表格的行属性 134 　　7.5.1　高度的控制——height 134 　　7.5.2　行的边框颜色——bordercolor 135 　　7.5.3　行的背景颜色——bgcolor、background 136 　　7.5.4　行文字的水平对齐方式——align 137 　　7.5.5　行文字的垂直对齐方式——valign 139 　　7.5.6 表格标题的垂直对齐方式——align 140 　　7.6　调整单元格属性 141 　　7.6.1　单元格大小——width、height 141 　　7.6.2　单元格水平跨度——colspan 142 　　7.6.3　单元格垂直跨度——rowspan 143 　　7.6.4　单元格对齐方式——align、valign 144 　　7.6.5　单元格的背景色 146 　　7.6.6　单元格的边框颜色——bordercolor 147 　　7.6.7　单元格的亮边框——bordercolorlight 148 　　7.6.8　单元格的暗边框——bordercolordark 150 　　7.6.9　单元格的背景图像——background 151 　　7.7　表格的结构 152 　　7.7.1　表格的表头标记——thead 153 　　7.7.2　表格的表主体标记——tbody 154 　　7.7.3　表格的表尾标记——tfoot 156 　　7.8 表格的嵌套 157 　　7.9 小结 159 　　7.10 习题 159 　　第8章层标记——div 161 　　教学录像：33分钟　　8.1 层 162 　　8.1.1 层的分类 162 　　8.1.2 定义数据块 162 　　8.2 <div>标签 163 　　8.2.1 <div>标签的简介 163 　　8.2.2 <div>标签的属性 164 　　8.2.3 <span>标签与<div>标签 170 　　8.3 <iframe>标签 172 　　8.3.1 <iframe>标签的简介 172 　　8.3.2 <iframe>标签的属性 172 　　8.4 <layer>标签和<ilayer>标签 174 　　8.4.1 标签层的使用 175 　　8.4.2 <layer>标签和<ilayer>标签的区别 176 　　8.5 应用div制作下拉菜单导航条 176 　　8.6 小结 179 　　8.7 习题 179 　　第9章编辑表单 181 　　教学录像：26分钟　　9.1　使用表单标签——form 182 　　9.1.1　处理动作——action 182 　　9.1.2　表单名称——name 183 　　9.1.3　传送方法——method 183 　　9.1.4　编码方式——enctype 184 　　9.1.5　目标显示方式——target 185 　　9.2 添加控件 185 　　9.3　输入类的控件 186 　　9.3.1　文字字段——text 186 　　9.3.2　密码域——password 187 　　9.3.3　单选按钮——radio 188 　　9.3.4　复选框——checkbox 189 　　9.3.5　普通按钮——button 190 　　9.3.6　提交按钮——submit 191 　　9.3.7　重置按钮——reset 192 　　9.3.8　图像域——image 193 　　9.3.9　隐藏域——hidden 195 　　9.3.10　文件域——file 195 　　9.4　列表/菜单标记 197 　　9.5　文本域标记——textarea 198 　　9.6　id标记 199 　　9.7　小结 200 　　9.8　习题 200 　　第10章多媒体页面 202 　　视频讲解：18分钟　　10.1 设置滚动文字 203 　　10.1.1 滚动文字标签——marquee 203 　　10.1.2 滚动方向属性——direction 203 　　10.1.3 滚动方式属性——behavior 204 　　10.1.4 滚动速度属性——scrollamount 205 　　10.1.5 滚动延迟属性——scrolldelay 206 　　10.1.6 滚动循环属性——loop 207 　　10.1.7 滚动范围属性——width、height 208 　　10.1.8 滚动背景颜色属性——bgcolor 209 　　10.1.9 滚动空间属性——hspace、vspace 209 　　10.2 添加背景音乐 211 　　10.2.1　设置背景音乐——bgsound 211 　　10.2.2　设置循环播放次数——loop 212 　　10.3 添加多媒体文件 213 　　10.3.1 添加多媒体文件标记——embed 213 　　10.3.2 设置自动运行——autostart 214 　　10.3.3 设置媒体文件的循环播放——loop 215 　　10.3.4 隐藏面板——hidden 216 　　10.3.5 添加其他类型的媒体文件 217 　　10.4 小结 217 　　10.5 习题 218 　　第2篇 HTML 5高级应用　　第11章 HTML 5的新特性 221 　　视频讲解：6分钟　　11.1 谁在开发HTML 5 222 　　11.2 HTML 5的新认识 222 　　11.2.1 兼容性 222 　　11.2.2 实用性和用户优先 222 　　11.2.3 化繁为简 223 　　11.3 无插件范式 223 　　11.4 HTML 5的新特性 224 　　11.5 小结 224 　　第12章 HTML 5与HTML 4的区别 225 　　视频讲解：51分钟　　12.1 语法的改变 226 　　12.1.1 HTML 5的语法变化 226 　　12.1.2 HTML 5中的标记方法 226 　　12.1.3 HTML 5语法中的3个要点 227 　　12.1.4 标签实例 228 　　12.2 新增的元素和废除的元素 228 　　12.2.1 新增的结构元素 228 　　12.2.2 新增的块级的语义元素 230 　　12.2.3 新增的行内的语义元素 231 　　12.2.4 新增的嵌入多媒体元素与交互性元素 231 　　12.2.5 新增的input元素的类型 232 　　12.2.6 废除的元素 233 　　12.3 新增的属性和废除的属性 234 　　12.3.1 新增的属性 234 　　12.3.2 废除的属性 236 　　12.4 全局属性 237 　　12.4.1 contentEditable属性 237 　　12.4.2 designMode属性 238 　　12.4.3 hidden属性 239 　　12.4.4 spellcheck属性 239 　　12.4.5 tabindex属性 240 　　12.5 小结 240 　　12.6 习题 240 　　第13章 HTML 5的结构 242 　　视频讲解：20分钟　　13.1 新增的主体结构元素 243 　　13.1.1 article元素 243 　　13.1.2 section元素 245 　　13.1.3 nav元素 247 　　13.1.4 aside元素 248 　　13.1.5 time元素 250 　　13.1.6 pubdate属性 250 　　13.2 新增的非主体结构元素 251 　　13.2.1 header元素 251 　　13.2.2 hgroup元素 252 　　13.2.3 footer元素 252 　　13.2.4 address元素 253 　　13.3 小结 253 　　13.4 习题 254 　　第14章 HTML 5中的表单 255 　　视频讲解：50分钟　　14.1 新增表单元素与属性 256 　　14.1.1 新增的属性 256 　　14.1.2 增加与改良的input元素的种类 259 　　14.1.3 output元素的添加 264 　　14.1.4 应用新增元素制作注册表单 264 　　14.2 对表单的验证 266 　　14.2.1 自动验证 266 　　14.2.2 checkValidity显式验证法 267 　　14.2.3 避免验证 268 　　14.2.4 使用setCustomValidity方法自定义　　错误信息 268 　　14.3 增加的页面元素 269 　　14.3.1 新增的figure元素 270 　　14.3.2 新增的details元素 271 　　14.3.3 新增的mark元素 272 　　14.3.4 新增的progress元素 274 　　14.3.5 新增的meter元素 275 　　14.3.6 改良的ol列表 276 　　14.3.7 改良的dl列表 276 　　14.3.8 加以严格限制的cite元素 277 　　14.3.9 重新定义的small元素 278 　　14.4 小结 278 　　14.5 习题 279 　　第15章 HTML 5中的文件与拖放 280 　　视频讲解：40分钟　　15.1 选择文件 281 　　15.1.1 通过file对象选择文件 281 　　15.1.2 使用blob接口获取文件的类型与大小 282 　　15.1.3 通过类型过滤选择的文件 283 　　15.2　使用FileReader接口读取文件 285 　　15.2.1 检测浏览器是否支持FileReader接口 285 　　15.2.2　FileReader接口的方法 285 　　15.2.3 使用readAsDataURL方法预览图片 286 　　15.2.4　使用readAsText方法读取文本文件 287 　　15.2.5　FileReader接口中的事件 288 　　15.3 拖放API 290 　　15.3.1 实现拖放的步骤 290 　　15.3.2 通过拖放显示欢迎信息 291 　　15.4 dataTransfer对象应用详解 293 　　15.4.1 使用effectAllowed和dropEffect属性　　设置拖放效果 293 　　15.4.2 使用setDragImage方法设置拖放图标 294 　　15.5 小结 295 　　15.6 习题 295 　　第16章多媒体播放 296 　　视频讲解：35分钟　　16.1 HTML 5多媒体的简述 297 　　16.1.1 HTML 4中多媒体的应用 297 　　16.1.2 HTML 5页面中的多媒体 297 　　16.2 多媒体元素基本属性 298 　　16.3 多媒体元素常用方法 302 　　16.3.1 媒体播放时的方法 302 　　16.3.2 canPlayType(type)方法 304 　　16.4 多媒体元素重要事件 304 　　16.4.1 事件处理方式 304 　　16.4.2 事件介绍 305 　　16.4.3 事件实例 306 　　16.5 小结 308 　　16.6 习题 309 　　第17章绘制图形 310 　　视频讲解：1小时32分钟　　17.1 canvas的基础知识 311 　　17.1.1 canvas是什么 311 　　17.1.2 在页面中放置canvas元素 311 　　17.1.3 绘制带边框的矩形 312 　　17.2 在画布中使用路径 314 　　17.2.1 使用arc方法绘制圆形 314 　　17.2.2 使用moveTo与lineTo路径绘制火柴人 316 　　17.2.3 贝塞尔和二次方曲线 317 　　17.3 运用样式与颜色 319 　　17.3.1 fillStyle 和 strokeStyle属性 319 　　17.3.2 透明度 globalAlpha 321 　　17.3.3 线型 Line styles 323 　　17.4 绘制渐变图形 325 　　17.4.1 绘制线性渐变 325 　　17.4.2 绘制径向渐变 326 　　17.5 绘制变形图形 328 　　17.5.1 坐标的变换 328 　　17.5.2 矩阵变换 330 　　17.6 组合多个图形 333 　　17.7 给图形绘制阴影 335 　　17.8 应用图像 336 　　17.8.1 绘制图像 336 　　17.8.2 图像的局部放大 338 　　17.8.3 图像平铺 339 　　17.8.4 图像裁剪 341 　　17.8.5 像素的处理 342 　　17.9 绘制文字 344 　　17.10 保存与恢复状态 345 　　17.11 文件的保存 346 　　17.12 对画布绘制实现动画 347 　　17.13 综合实例——桌面时钟 348 　　17.14 小结 350 　　17.15 习题 351 　　第18章数据存储 352 　　视频讲解：50分钟　　18.1 初识Web Storage 353 　　18.1.1 什么是Web Storage 353 　　18.1.2 使用Web Storage中的API 353 　　18.1.3 sessionStorage和localStorage的实例　　——计数器 355 　　18.1.4 Web Storage综合实例——留言本 357 　　18.1.5 JSON对象的存数实例——用户信息卡 359 　　18.2 本地数据库 361 　　18.2.1 Web SQL数据库简介 361 　　18.2.2 使用Web SQL Database API 362 　　18.2.3 本地数据库实例——用户登录 363 　　18.3 小结 367 　　18.4 习题 367 　　第19章离线应用程序 368 　　视频讲解：13分钟　　19.1 HTML 5离线Web应用概述 369 　　19.1.1 离线Web应用概述 369 　　19.1.2 本地缓存与浏览器网页缓存的区别 370 　　19.2 创建HTML 5离线应用 370 　　19.2.1 缓存清单（manifest） 370 　　19.2.2 配置IIS服务器 372 　　19.2.3 浏览缓存清单 372 　　19.3 浏览器与服务器的交互过程 373 　　19.4 applicationCache对象 374 　　19.4.1 swapCache方法 375 　　19.4.2 applicationCache对象的事件 376 　　19.5 小结 379 　　19.6 习题 379 　　第20章使用Web Worker处理线程 380 　　视频讲解：25分钟　　20.1 Web Worker概述 381 　　20.1.1 创建和使用Worker 381 　　20.1.2 Web Worker应用实例——求和运算 382 　　20.2 在Worker内部能做什么 383 　　20.3 多个JavaScript文件的加载与执行 384 　　20.4 线程嵌套 384 　　20.4.1 单层嵌套 385 　　20.4.2 在多个子线程中进行数据的交互 387 　　20.5 小结 390 　　20.6 习题 390 　　第21章通信API 391 　　视频讲解：4分钟　　21.1 跨文档消息通信 392 　　21.1.1 使用postMessageAPI 392 　　21.1.2 跨文档消息传输 392 　　21.2 小结 394 　　第22章获取地理位置信息 395 　　视频讲解：12分钟　　22.1 Geolocation API的概述 396 　　22.1.1 使用getCurrentPosition方法获取　　当前地理位置 396 　　22.1.2 持续监视当前地理位置的信息 398 　　22.1.3 停止获取当前用户的地理位置信息 398 　　22.2 position对象 398 　　22.3 在google地图上显示“我在这里” 399 　　22.4 小结 401 　　22.5 习题 401 　　第3篇 HTML 5项目实战　　第23章旅游信息网前台页面 405 　　视频讲解：20分钟　　23.1 概述 406 　　23.2 网站预览 406 　　23.3 关键技术 410 　　23.3.1 网站主体结构设计 410 　　23.3.2 HTML 5结构元素的使用 410 　　23.4 网站公共部分设计 411 　　23.4.1 设计网站公共header 411 　　23.4.2 设计网站公共footer 418 　　23.5 网站主页设计 419 　　23.5.1 显示网站介绍及相关图片 419 　　23.5.2 主页左侧导航的实现 421 　　23.6 留下足迹页面设计 424 　　23.6.1 播放音乐 424 　　23.6.2 添加留言功能的实现 425 　　23.7 小结 426 　　附录习题参考答案 427 　　HTML 5从入门到精通　　目录　　X 　　XI

HTML + JavaScript + Ajax + CSS 赵旭 zhaoxu@tedu.cn HTML5 1、WEB基础知识(了解) 1、Internet - 网由若干台电脑、手机、平板通过网线(WIFI) 连接起来的结构 2、基于Internet上的程序 1、C / S 结构 Client / Server 特点：必须通过指定的客户端软件才能访问服务器端的一种程序：如：桌面版QQ，... ... 2、B / S 结构 Browser / Server Browser ：浏览器特点：通过浏览器就能访问服务器端的一种程序如：网页版百度，网页版 QQ，网页版京东，... ... 3、WEB 1、什么是WEB WEB，是基于Internet上的一种应用程序(网页应用程序) WEB页面，简称WEB页(网页)，就是保存在服务器端上的一个具体的页面( **.html / **.htm 作为结尾的文件) 2、WEB浏览器 1、功能 1、提交用户请求 (UA : User Agent) 2、作为HTML 以及脚本执行的解释器 3、以图形化的方式显示web页面 2、主要浏览器产品 1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、Apple Safari 5、Opera Opera(欧朋) 3、主要技术 1、HTML 2、CSS 3、Javascript 2、HTML入门(重点) 1、什么是HTML Hyper Text Markup Language 超级文本标记语言超文本：也是文本，但会具备特殊功能普通文本 a : 普通字符 a 超文本 a : 表示超链接普通文本 b : 普通字符 b 超文本 b : 加粗显示文本标记：超文本的表现形式普通文本 a : a 超文本 a : 语言：具备一定的语法规范 HTML 也具备自己的语法规范 WEB页面(HTML页面)就是由 HTML 语言来进行开发的，以 .html 或 .htm 进行结尾的文件开发 & 运行网页的工具： 1、记事本 2、浏览器 2、HTML 的基础语法 1、标记语法 HTML中用于描述功能的符号称为"标记" 标记在使用时，用尖括号 "",标记的分类 1、封闭类型的标记也称为 "双标记" , 必须成对出现语法：内容 Demo ： 1、创建 p 标记 --... 2、创建 div 标记 -- 3、创建 header 标记 -- <header></header> 2、非封闭类型的标记也称为 "单标记" 语法：或 Demo ： 1、创建 br 标记 -- 2、创建 hr 标记 -- 3、创建 img 标记 -- 4、创建 input 标记 -- <input/> 2、标记(元素)的嵌套在一对标记中，允许出现另外一对(一个)标记注意：嵌套标记的书写格式 -- 被嵌套的标记要通过一个缩进键(Tab) 来表示层级关系 Demo : 1、编写一对 body 标记，在body标记中，嵌套一对 div标记，在 div 标记中，嵌套一对 a 标记，在 a标记中，嵌套一对 b 标记，b标记中，随意编写一些文本 <body> 这是一段测试文本 </body> 3、标记的属性 1、什么是属性用来修饰标记的效果的内容，就是属性 2、语法 1、属性必须声明在开始标记中 2、属性与标记名称之间，用空格隔开 3、属性的值与属性之间使用 "=" 连接 4、一个元素允许有多属性，多属性间，排名不分先后，中间用空格隔开即可 Demo : 1、创建一个 div 标记，增加属性，设置 align 属性的值为 center ，设置 id 属性的值为 container，设置 title 属性的值为这是一个div 四大标准属性： 1、id ：定义元素在页面中独一无二的名称 2、title ：鼠标悬停在元素上时，体现的文字 3、class ：引用类选择器时使用(CSS中) 4、style ：定义内联方式方式使用(CSS中) 4、注释语法： 注意： 1、注释不能嵌套 2、注释不能出现在标记中 3、HTML 文档结构 W3C ：Word Wide Web Consortium (万维网联盟) 1、HTML文档的组成 1、文档类型声明告知浏览器当前的HTML文档用的是哪个版本在网页的最顶端 2、由一对 html 根标记，来表示页面的开始与结束 Demo : 1、在 htdoc 中，创建一个网页 01-first.html 文件创建一个记事本，将 .txt 重命名为 .html 2、搭建HTML网页结构 1、添加文档类型声明 2、添加 html 根标记 2、<html> 标记包含两对子元素 1、<head></head> 包含的子元素(2对) 1、<title>网页的标题</title> 2、<meta charset="utf-8"/> -- 能正常显示中文 2、<body></body> 属性： 1、text ，取值是一个颜色值(red,green,blue...) 2、bgcolor ，取值也是一个颜色值 Demo : 在刚才的 Demo 基础上 1、在 <html>中增加 <head> 和 <body> 2、为网页指定标题 - 我的第一个HTML文档 3、指定网页的字符编码格式为 utf-8 4、在 body 中输出一句话 "我的第一HTML页面" 5、设置 body text为red，bgcolor为yellow 3、文本 1、特殊文本的实现页面的空格以及一些特殊字符需要通过转义字符的方式体现 1、表示一个空格 2、< 表示 4、© 表示© Demo : 1、创建一个页面 02-text.html 2、在页面中输出以下内容 The element. ©2017 By Tarena The <p> element. © By Tarena 2、文本样式相关标记 : 加粗 : 斜体 : 下划线 : 删除线 : 上标 : 下标 Demo ：这是一段包含，粗体，斜体，下划线，删除线，上标，下标的文本内容将以上文本内，对应文字的特殊效果，用标记体现出来 3、标题元素以醒目的方式表现出文本语法：一级标题二级标题三级标题四级标题五级标题六级标题属性： 1、align 文本的水平对齐方式取值：left / center / right 4、段落元素语法：属性：align : left / center / right Demo : 1、在 02-text.html 中，增加以下内容 1、用段落标记表示 :The first paragraph 2、用段落标记表示 :The second paragraph ，文本表现为右对齐 5、换行元素 6、分割线元素作用：在页面中表现为一条直线语法：属性： 1、size 尺寸，以 px 为单位的数值 2、width 宽度，以 px 或 % 为单位的数值 3、align 水平对其方式 4、color 颜色 Demo ： 02-text.html 中增加一根水平线，size为5px，宽度为50%，居中对齐，颜色为红色(red) 7、预格式化作用：保留源文档中的回车和空格的作用 8、分区元素 1、块分区元素语法：作用：布局 2、行内分区元素语法：作用：设置同一行文字内的不同样式 9、行内元素与块级元素按照元素们的表现形式来分类，分为行内元素和块级元素1、行内元素在一行内允许显示多个元素的，称为 "行内元素" span,i,b,s,u,sup,sub 作用：包裹文本，并处理文本的表现形式 2、块级元素每个元素独占一行显示的，称为 "块级元素" div,p,h1,h2,h3,h4,h5,h6 作用：布局注意： 1、p标记不能嵌套其它的块级元素 2、行内元素中最好不要嵌套块级元素 4、图像和链接 1、URL 目录结构：目录，保存文件的文件夹名称多个文件夹之间的关系，就是目录结构 1、什么是 URL URL (Uniform Resource Locator)，统一资源定位器。用来标识某资源文件的位置 2、URL 在 WEB 中的表现形式共三种表现形式： 1、绝对路径特点：从文件所在的最高级目录处开始查找资源文件所经过的路径，就是绝对路径使用场合：当想访问互联网上的资源时，只能用绝对路径完整的绝对路径分四部分： 1、协议名 http 2、域名(主机名，IP地址) www.codeboy.com 3、目录路径 img/header 4、文件名 logo.png http://www.codeboy.com/img/header/logo.png img/header/logo.png 2、相对路径(重点) 场合：使用本机文件时使用什么是相对路径：从当前文件位置处开始查找资源文件所经过的路径，就是相对路径 1、同目录，直接用 2、子目录，先进入 3、父目录，先返回 3、根相对路径路径形式是以 / 作为开始的。 / : 表示的是服务器的根路径 2、图像 1、图像格式 WEB中支持的图像格式 1、*.jpg 2、*.gif(动图) 3、*.png(透明) 2、图像的语法标记：属性： 1、src ：指定要显示图像的 URL 2、width ：图像的宽度 3、height ：图像的高度 4、title ：鼠标悬停时，要显示的文本 Demo : 1、将学子网的 logo 下载下来 2、显示在自己的网页中 3、超链接 1、语法标记：内容属性： 1、href : 要链接的HTML页面URL 2、target : 目标，指定新网页的打开形式取值： 1、_blank : 在新标签页中打开网页 2、_self : 在自身标签页中打开新网页(默认值) Demo 1、创建一个超链接，内容为：学子商城，点击时，在自身标签页中打开 http://www.codeboy.com 2、创建一个超链接，内容为：学子商城的LOGO，点击时，在新标签页中打开 http://www.codeboy.com 2、链接的四种表现形式 1、点击操作时，完成资源下载的操作链接的资源为 zip / rar 时则为下载操作下载 2、电子邮件链接联系我们前提：必须在计算机中安装并配置好至少一个邮件客户端的信息 3、返回页面顶部的空连接返回顶部 4、执行Javascript代码片段执行JS 3、锚点 1、作用锚点用于在网页中的某个位置处做个记号,允许从其他位置处跳转到记号位置处 2、使用方式 1、定义锚点 1、使用 a 标记的 name 属性允许定义锚点 xxxx 2、任何标记的 id 属性定义锚点 2、链接到锚点链接到锚点链接到锚点 5、表格 1、表格 1、表格的作用按照一定的格式来显示数据的表格是由 单元格(列)，行来组成的 2、表格的语法 1、标记 1、 : 表示一个表格 2、 : 表示表格中的一行 3、 : 表行中的一列(单元格) : 行/列标题 (加粗，水平居中) 4、 : 表格的标题该元素必须添加在之下，所有的tr之上 2、常用属性 1、table 1、width 2、height 3、align 设置表格的对齐方式， left / center / right 4、border 边框宽度，取值以 px 为单位的数值 5、bgcolor 6、cellspacing ：单元格外边距(单元格与单元格 或 单元格与表格之间的距离) 7、cellpadding : 单元格内边距(单元格与内容之间的距离) 2、tr 1、align 控制当前行内容的水平对齐方式 2、valign 控制当前行内容的垂直对齐方式 top / middle / bottom 3、bgcolor 3、td / th 1、align 2、valign 3、width 4、height 5、colspan ：跨列 6、rowspan ：跨行 Demo : 在刚才的表格基础上，增加以下内容 1、为表格增加边框 1px 2、为表格增加尺寸 400 * 400 3、为表格增加单元格内边距 5px 4、为第四行增加属性，内容水平居中对齐 3、表格的复杂应用 1、行分组允许将若干行划分到一个组中，以便实现统一管理 1、表头行分组允许将第一行的内容单独分到表头行分组中 2、表尾行分组允许将最后一行的内容单独分到表尾行分组中 3、表主体行分组 2、不规则表格创建通过 td 的跨行和跨列来实现不规则的表格 1、跨列从指定单元格位置处开始，横向向右，合并掉几个单元格(包含自己),被合并掉的单元格，要删除 2、跨行从指定单元格位置处开始，纵向向下，合并掉几个单元格(包含自己),被合并掉的单元格，要删除 3、表格的嵌套被嵌套的所有的内容，只能放在 td 中 2、列表 1、作用按照一定的格式显示数据 2、列表的分类 & 语法 1、列表的组成由列表类型以及列表项来组成 2、分类 & 语法 1、有序列表 --> Order List 允许包含若干列表项： --> List Item 2、无序列表 --> Unorder List 允许包含若干列表项： 3、属性 1、ol 1、type 1 、按数字方式排列,默认值 a 、按小写英文方式排列 A 、按大写英文方式排列 i 、按小写罗马数字排列 I 、按大写罗马数字排列 2、start 指定标识从几开始显示 2、ul 1、type 1、disc，实心圆,默认值 2、circle，空心圆 3、square，实心矩形 4、none 3、列表的嵌套被嵌套的内容只能放在 li 中 Demo : 1、声明一个列表在 html 中(有序)，包含两个列表项，显示两部小说的名字 2、在两个列表项中，再各嵌套一个无序列表，各写3-4个小说中的主角 3、定义列表 1、作用以一种特殊的结构来排列数据通常用语对一类事物/名词的解释上面 2、语法：声明一个定义列表：声明要解释的事物名称或名词：对上述名词或事物解释的内容 3、常用场合图文混排 3、结构标记 1、结构标记的作用搭建网页的结构(布局),用于替代 div，最大的优点是提升了标记的"语义性" 2、结构标记详解 1、<header></header> 作用：表示网页或某块内容的头部 2、作用：表示网页中的导航内容 3、作用：表示网页主体内容中的某一部分 4、作用：出现在文字描述性比较强的场合:一则新闻，论坛中的帖子，微博信息，博客的信息 5、作用：表示网页中，或某部分内容的边栏信息 6、作用：表示网页中尾部的信息 4、表单(难点) 1、表单的作用用于收集用户的信息并提交给服务器表单主体是由两部分组成的 1、表单元素收集信息，并提交给服务器 2、表单控件用于与用户交互的一些元素：文本框，密码框 2、表单元素(难点) 标记：<form></form> 注意：只有放在 <form></form> 里面的表单控件的值，才能提交给服务器属性： 1、action 提交给服务器处理程序的地址 (动作) 2、method 提交方式，以什么样的方式把数据交给服务器 1、get 特点： 1、以明文的方式将数据传递给服务器(提交的数据会显示在地址栏上) 2、安全性很低 3、提交数据最大限制为 2KB 4、向服务器要数据时可以使用 2、post 特点： 1、以隐式的方式将数据传递给服务器 2、安全性很高 3、不限制提交数据的大小 4、要提交数据给服务器处理时使用 3、... ... 3、enctype 作用：指定表单数据进行编码的方式取值： 1、application/x-www-form-urlencoded 默认值，允许将任意类型的文本提交给服务器 2、multipart/form-data 允许将文件提交给服务器 3、text/plain 不对任何数据进行编码和传输 Demo : 1、创建 05-form.html 2、声明一个表单元素 form 3、指定提交地址为 login.php,提交方式为 get，编码方式为默认 3、表单控件表单元素分类： 1、input元素 2、textarea 多行文本域 3、select 和 option 选项框 4、其它元素 5、新input元素详解： 1、input元素里面会包含若干个不同的表单控件标记：<input> 属性： 1、type 根据不同的type属性值，可以创建不同的input元素 2、name 定义表单控件的名称，主要提交给服务器使用的注意：如果不声明name属性的话，元素则无法提交给服务器 3、value 定义当前控件的值，主要提交给服务器使用的 4、disabled 禁用控件，无值的属性 <input disabled> 2、文本框与密码框文本框：<input type="text"> 密码框：<input type="password"> 具备除以上四个属性外，还具备以下几个独立属性： 1、maxlength 限制输入的字符数，取值为数字 2、readonly 只读，无值属性 Q : readonly 和 disabled 的区别 1、readonly ，是只读的意思，是允许提交给服务器，不让用户改数据而已 2、disabled ，是禁用的意思，不仅不让用户改数据，而且还不能提交给服务器 3、placeholder 占位符，即默认显示在文本框用于给用户提示的文字 3、按钮 1、提交按钮作用：将表单提交给服务器标记：<input type="submit" value="显示的文本"> 2、重置按钮作用：将表单恢复到初始化的状态标记：<input type="reset" value="显示的文本"> 3、普通按钮作用：通过 JS 自定义功能标记：<input type="button" value="显示的文本"> 4、显示的内容属性： 1、type ：submit / reset / button 4、单选按钮和复选框单选按钮：<input type="radio"> 复选框：<input type="checkbox"> 属性： 1、name 设置名称，并用于分组，一组单选按钮或复选框的名称必须相同 2、value 必须设置 3、checked 默认被选中，无值属性 5、隐藏域和文件选择框 1、隐藏域 <input type="hidden" name="" value=""> 想提交给服务器，但不想给用户看的数据，可以放在隐藏域中 2、文件选择框 <input type="file" name=""> 注意： 1、form的 method 属性值必须为 post 2、form的 enctype属性值必须为 multipart/form-data http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=bingbing http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=fengjie&gender=1&question=0&question=1&question=2&question=3 http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=fdsafdsafdsa&gender=0&question=0&question=1&question=2&question=3&uid=10000567789 1、表单 1、form ... 2、input ... 3、textarea 控件标记：<textarea></textarea> 属性： 1、name 定义名称，提交给服务器使用 2、cols 指定文本域的列数，变相指定宽 3、rows 指定文本域的行数，变相指定高 4、readonly 只读 Demo : 创建 01-form.html 文件创建一个多行文本域，列数为 50，行数为 5，名称为 intro 4、选项框 1、标记表示下拉列表或滚动列表列表中的内容，允许出现多个 2、属性 1、 1、name ：控件的名称 2、size ：默认显示选项的数量，默认为1，为下拉列表，如果取值>1的话，则为滚动列表 3、multiple 设置多选，无值的属性 2、 1、value ：选项的值，提交给服务器用 2、selected ：默认被选中 5、其它标记 1、label 元素作用：关联文本与表单控件的，点击文本时就如同点击表单控件一样标记：文本属性： 1、for 指定要关联的表单控件的ID值 2、为控件分组分组标题分组中的内容 3、浮动框架 1、作用将其他页面导入到当前页面中来 2、语法标记：<iframe></iframe> 属性： 1、src 要引入的页面的url 2、frameborder 指定浮动框架的边框，默认为1，则显示边框不需要边框则设置为 0 3、width 4、height 练习：创建一个 02-iframe 的网页，将 01-form.html 页面引入进来，适当调整宽度，高度，边框 6、新input元素 (HTML5) 1、电子邮件类型作用：提交时会验证数据是否符合Email的规范标记：<input type="email"> 2、搜索类型作用：在文本框的基础上，提供了快速清除操作标记：<input type="search"> 3、URL类型作用：提交时会验证数据是否符合Web站点的URL规范(绝对路径) 标记：<input type="url"> 4、电话号码类型作用：在移动端设备中，能展开拨号键盘，在PC中无效标记：<input type="tel"> 5、数字类型作用：只能让用户输入或选择数字标记：<input type="number"> 属性： 1、min ：当前控件接受的最小值 2、max ：当前控件接受的最大值 3、step ：微调数字时每次变化的长度,默认为1 6、范围类型作用：提供一个滑块，让用户选择数字标记：<input type="range"> 属性： 1、min ：当前控件的最小值 2、max ：当前控件的最大值 3、value ：设定初始值 7、颜色类型作用：提供一个颜色拾取控件语法：<input type="color"> 8、日期类型作用：提供一个日期输入控件标记：<input type="date"> 9、周类型作用：提供一个日期控件，用于选取周标记：<input type="week"> 10、月份类型作用：选取月份控件标记：<input type="month"> =============================

html中怎么解决表格单元格td设置宽度无效的问题发布时间：2020-09-28 16:16:34来源：亿速云阅读：87作者：小新小编给大家分享一下html中怎么解决表格单元格td设置宽度无效的问题，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！在做table页面时，有时对td设置的宽度是无效的，td的宽度始终有内部的内容撑开，可以设置padding，但直接设置width却无效，下面我...

先上效果图：CSS:body{margin:0px;padding:0px;-moz-user-select:none;cursor:default;}.tabEditDiv{position:absolute;width:15px;height:15px;cursor:pointer;}.seltab{position:absolute;width:15px;height:15px;cursor...

解决方法：在表格中加入 word-wrap: break-word; word-break: break-all;

61,112

社区成员

60,732

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章