Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML表格制作 @ouland   @kayism   @litterbugs
目标建立各种复杂的表格不涉及表格的样式
我们要用到的工具Notepad++/Notepad/Vi/Emacs/Textmate/Netbeans/Eclipse/…/纯文本编辑器把原稿复印一下,画画格线Excel/OpenOffice之类不推荐使用Dreamweaver之类
表格的基本类型
来看一个例子
表格基础<tr>   <td></td>                      <td></td>       <td></td>                      <td></td>       <td></td>        ...
单元格横向合并colspan=“n”    <tr>       <td colspan=“2”></td>       <td></td>       <td></td>    </tr>    <tr>       <td></td>   ...
单元格纵向合并rowspan=“n”   <tr>      <td rowspan=“2”></td>      <td></td>      <td></td>      <td></td>   </tr>   <tr>      <td>...
单元格纵向合并rowspan=“n” (2)<tr>   <td></td>   <td rowspan=“2”></td>   <td></td>   <td></td></tr><tr>   <td></td>   <td></td>   ...
画格线
方便的工具:excel
几个要注意的问题• 宽度指定      A              B        C   D             E                              F                          X•...
关于样式的一些补充<table cellspacing="0" cellpadding="0">…</table>     cellspacing 属性   cellpadding 属性     规定单元格之间          规定单元边沿与...
关于样式的另一些补充table {  border-collapse:   /* 设置表格的边框是collapse;            否被合并为一个单一                     的边框,还是象在标}            ...
关于样式的又一些补充        .title {            border-bottom: 3px double #000000;            margin: 0 auto;            padding: 0;...
不赞成使用的标签和属性
THX :)
Upcoming SlideShare
Loading in …5
×

Html表格制作

1,612 views

Published on

便捷的html表格制作,合并什么的轻松搞定

Published in: Design
  • Be the first to comment

  • Be the first to like this

Html表格制作

  1. 1. HTML表格制作 @ouland @kayism @litterbugs
  2. 2. 目标建立各种复杂的表格不涉及表格的样式
  3. 3. 我们要用到的工具Notepad++/Notepad/Vi/Emacs/Textmate/Netbeans/Eclipse/…/纯文本编辑器把原稿复印一下,画画格线Excel/OpenOffice之类不推荐使用Dreamweaver之类
  4. 4. 表格的基本类型
  5. 5. 来看一个例子
  6. 6. 表格基础<tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr>…</tr> <tr>…</tr> </table>
  7. 7. 单元格横向合并colspan=“n” <tr> <td colspan=“2”></td> <td></td> <td></td> </tr> <tr> <td></td> <td colspan=“2”></td> <td></td> </tr>
  8. 8. 单元格纵向合并rowspan=“n” <tr> <td rowspan=“2”></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr>…</tr>
  9. 9. 单元格纵向合并rowspan=“n” (2)<tr> <td></td> <td rowspan=“2”></td> <td></td> <td></td></tr><tr> <td></td> <td></td> <td></td></tr><tr>…</tr>
  10. 10. 画格线
  11. 11. 方便的工具:excel
  12. 12. 几个要注意的问题• 宽度指定 A B C D E F X• 文字越界处理 word-wrap: break-word; overflow: hidden;
  13. 13. 关于样式的一些补充<table cellspacing="0" cellpadding="0">…</table> cellspacing 属性 cellpadding 属性 规定单元格之间 规定单元边沿与 的空间。 其内容之间的空 白。
  14. 14. 关于样式的另一些补充table { border-collapse: /* 设置表格的边框是collapse; 否被合并为一个单一 的边框,还是象在标} 准的 HTML 中那样分 开显示。 */
  15. 15. 关于样式的又一些补充 .title { border-bottom: 3px double #000000; margin: 0 auto; padding: 0; width: 350px; } .title h1 { letter-spacing: 20px; margin: 0 -20px 0 0; }
  16. 16. 不赞成使用的标签和属性
  17. 17. THX :)

×