网站地图    收藏   

主页 > 前端 > html教程 >

html的table用法(让网页的视觉效果显示出来)_HTML

来源:自学PHP网    时间:2014-12-15 15:58 作者: 阅读:

[导读] 在html语法中table(即表格)是不可少的部分,没有着个,是很难对网页的视觉效果显示出来,现在我就说一下table,感兴趣的朋友可以参考下哈...

在html语法中table(即表格)是不可少的部分,没有着个,是很难对网页的视觉效果显示出来,现在我就说一下table,感兴趣的朋友可以参考下哈

我们知道在网易博客可以用html时,是否把代码直接加入到摸板中,但是效果却不是很好。那是因为没有对代码进行很好的排列,现在我说一下用table来排列,可以很好的把特效显示出来。

在html语法中table(即表格)是不可少的部分,没有着个,是很难对网页的视觉效果显示出来,现在我就说一下table。下面就是一个二行二列的表格:

   
   

代码为:<TABLE style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" cellSpacing=1 cellPadding=1 width="100%" border=1>
<TBODY>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR></TBODY></TABLE>

tr表示行,td表示列,border表示粗细(”0“就是不会显示),&nbsp;表示空格。在这里,表格的宽度最好是100%(width="100%"),现在明白了吗?明白了就可以在“<TD>&nbsp;</TD>”加上你想要的代码.

如:<TABLE style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" cellSpacing=1 cellPadding=1 width="100%" border=1>
<TBODY>
<TR>
<td><marquee>欢迎来到ω.⑨s.使者家园</marquee></td>
<TD>&nbsp;</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR></TBODY></TABLE>

效果为:

欢迎来到ω.⑨s.使者家园  
   

就像这样,其他的一样。

再说一点:我们弄表格时有些像这样的表格:

 
   
   
 

的做法是:

<table border="1" width="100%">
 <tr>
  <td colspan="2">&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
</table>


<table border="1" width="100%">
 <tr>
  <td rowspan="2">&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
 </tr>
</table>

仔细一看就多出了colspan="2"和rowspan="2"是不是啊!!!!

这个你是要要的"2"是参数,也要自己设的〉

<table border="1" width="100%">
 <tr>
  <td colspan="2"><marquee>欢迎来到ω.⑨s.使者家园</marquee></td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
</table>


<table border="1" width="100%">
 <tr>
  <td rowspan="2"><marquee>欢迎来到ω.⑨s.使者家园</marquee></td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
 </tr>
</table>

的效果分别为:

欢迎来到ω.⑨s.使者家园
   

欢迎来到ω.⑨s.使者家园  
 

注意:其他的代码一定要加在<td>....</td>中,此献给那些对html不了解的朋友们!!

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论