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

所属分类: 网页制作 / HTML/Xhtml 阅读数: 475
收藏 0 赞 0 分享

我们知道在网易博客可以用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不了解的朋友们!!

更多精彩内容其他人还在看

浅谈HTML代码中的空格和空行

下面小编就为大家带来一篇浅谈HTML代码中的空格和空行。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

全面了解html.css溢出

下面小编就为大家带来一篇全面了解html.css溢出。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

htm初学笔记(新手必看)

下面小编就为大家带来一篇htm初学笔记(新手必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML中文件上传时使用的<input type="file">元素的样式自定义

这篇文章主要介绍了HTML中文件上传时使用的<input type=
收藏 0 赞 0 分享

关于input的file 控件及美化

下面小编就为大家带来一篇关于input的file 控件及美化。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Html/Css(新手入门第一篇必看攻略)

下面小编就为大家带来一篇Html/Css(新手入门第一篇必看攻略)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML 隐藏滚动条和去除滚动条的方法

这篇文章主要介绍了HTML 隐藏滚动条和去除滚动条的方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

浅谈html标签的显示模式(块级标签,行内标签,行内块标签)

下面小编就为大家带来一篇浅谈html标签的显示模式(块级标签,行内标签,行内块标签)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

html制作细线表格的简单实例

下面小编就为大家带来一篇html制作细线表格的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML中table表格标签的基础学习教程

用table标签在Web上显示表格内容是HTML所具有的最基本功能之一,这里我们就来看一下HTML中table表格标签的基础学习教程,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多