html5中文学习网

您的位置: 首页 > 网页制作 > html教程 » 正文

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

[ ] 已经帮助:人解决问题
点评:在html语法中table(即表格)是不可少的部分,没有着个,是很难对网页的视觉效果显示出来,现在我就说一下table,感兴趣的朋友可以参考下哈

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

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

   
   

代码为:<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>5K2HTML5中文学习网 - HTML5先行者学习网
<TBODY>5K2HTML5中文学习网 - HTML5先行者学习网
<TR>5K2HTML5中文学习网 - HTML5先行者学习网
<TD>&nbsp;</TD>5K2HTML5中文学习网 - HTML5先行者学习网
<TD>&nbsp;</TD></TR>5K2HTML5中文学习网 - HTML5先行者学习网
<TR>5K2HTML5中文学习网 - HTML5先行者学习网
<TD>&nbsp;</TD>5K2HTML5中文学习网 - HTML5先行者学习网
<TD>&nbsp;</TD></TR></TBODY></TABLE>5K2HTML5中文学习网 - HTML5先行者学习网

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

如:<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>5K2HTML5中文学习网 - HTML5先行者学习网
<TBODY>5K2HTML5中文学习网 - HTML5先行者学习网
<TR>5K2HTML5中文学习网 - HTML5先行者学习网
<td><marquee>欢迎来到ω.⑨s.使者家园</marquee></td>5K2HTML5中文学习网 - HTML5先行者学习网
<TD>&nbsp;</TD></TR>5K2HTML5中文学习网 - HTML5先行者学习网
<TR>5K2HTML5中文学习网 - HTML5先行者学习网
<TD>&nbsp;</TD>5K2HTML5中文学习网 - HTML5先行者学习网
<TD>&nbsp;</TD></TR></TBODY></TABLE>5K2HTML5中文学习网 - HTML5先行者学习网

效果为:5K2HTML5中文学习网 - HTML5先行者学习网

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

就像这样,其他的一样。5K2HTML5中文学习网 - HTML5先行者学习网

再说一点:我们弄表格时有些像这样的表格:5K2HTML5中文学习网 - HTML5先行者学习网

 
   
   
 

的做法是:5K2HTML5中文学习网 - HTML5先行者学习网

<table border="1" width="100%">5K2HTML5中文学习网 - HTML5先行者学习网
 <tr>5K2HTML5中文学习网 - HTML5先行者学习网
  <td colspan="2">&nbsp;</td>5K2HTML5中文学习网 - HTML5先行者学习网
 </tr>5K2HTML5中文学习网 - HTML5先行者学习网
 <tr>5K2HTML5中文学习网 - HTML5先行者学习网
  <td>&nbsp;</td>5K2HTML5中文学习网 - HTML5先行者学习网
  <td>&nbsp;</td>5K2HTML5中文学习网 - HTML5先行者学习网
 </tr>5K2HTML5中文学习网 - HTML5先行者学习网
</table>
5K2HTML5中文学习网 - HTML5先行者学习网

5K2HTML5中文学习网 - HTML5先行者学习网
<table border="1" width="100%">5K2HTML5中文学习网 - HTML5先行者学习网
 <tr>5K2HTML5中文学习网 - HTML5先行者学习网
  <td rowspan="2">&nbsp;</td>5K2HTML5中文学习网 - HTML5先行者学习网
  <td>&nbsp;</td>5K2HTML5中文学习网 - HTML5先行者学习网
 </tr>5K2HTML5中文学习网 - HTML5先行者学习网
 <tr>5K2HTML5中文学习网 - HTML5先行者学习网
  <td>&nbsp;</td>5K2HTML5中文学习网 - HTML5先行者学习网
 </tr>5K2HTML5中文学习网 - HTML5先行者学习网
</table>
5K2HTML5中文学习网 - HTML5先行者学习网

仔细一看就多出了colspan="2"和rowspan="2"是不是啊!!!!5K2HTML5中文学习网 - HTML5先行者学习网

这个你是要要的"2"是参数,也要自己设的〉5K2HTML5中文学习网 - HTML5先行者学习网

<table border="1" width="100%">5K2HTML5中文学习网 - HTML5先行者学习网
 <tr>5K2HTML5中文学习网 - HTML5先行者学习网
  <td colspan="2"><marquee>欢迎来到ω.⑨s.使者家园</marquee></td>5K2HTML5中文学习网 - HTML5先行者学习网
 </tr>5K2HTML5中文学习网 - HTML5先行者学习网
 <tr>5K2HTML5中文学习网 - HTML5先行者学习网
  <td>&nbsp;</td>5K2HTML5中文学习网 - HTML5先行者学习网
  <td>&nbsp;</td>5K2HTML5中文学习网 - HTML5先行者学习网
 </tr>5K2HTML5中文学习网 - HTML5先行者学习网
</table>5K2HTML5中文学习网 - HTML5先行者学习网

5K2HTML5中文学习网 - HTML5先行者学习网
<table border="1" width="100%">5K2HTML5中文学习网 - HTML5先行者学习网
 <tr>5K2HTML5中文学习网 - HTML5先行者学习网
  <td rowspan="2"><marquee>欢迎来到ω.⑨s.使者家园</marquee></td>5K2HTML5中文学习网 - HTML5先行者学习网
  <td>&nbsp;</td>5K2HTML5中文学习网 - HTML5先行者学习网
 </tr>5K2HTML5中文学习网 - HTML5先行者学习网
 <tr>5K2HTML5中文学习网 - HTML5先行者学习网
  <td>&nbsp;</td>5K2HTML5中文学习网 - HTML5先行者学习网
 </tr>5K2HTML5中文学习网 - HTML5先行者学习网
</table>5K2HTML5中文学习网 - HTML5先行者学习网

的效果分别为:5K2HTML5中文学习网 - HTML5先行者学习网

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

5K2HTML5中文学习网 - HTML5先行者学习网

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

注意:其他的代码一定要加在<td>....</td>中,此献给那些对html不了解的朋友们!!5K2HTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助