灵魂腐蚀 发表于 2015-1-15 23:30:44

来讲讲:HTML言语分析(七) 表格标志

HTML5草案的前身名为WebApplications1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。  表格标志
  <TABLE><TR><TD>
  <TH>
  <CAPTION>
  ■<TABLE><TR><TD>:

  这三个标志是界说表格的最主要的标志,能够说只学这三个己充足。
  <TABLE>是一个容器标志,意义是说它用以声明这是表格并且其他表格标志只能在他的局限内才合用,属容器标志的另有其他。
  <TR>用以标示表格列(row)
  <TD>用以标示贮存格(cell)
  <TABLE>的参数设定(经常使用):
  比方:<tablewidth="400"border="1"cellspacing="2"cellpadding="2"align="CENTER"valign="TOP"background="myweb.gif"bgcolor="#0000FF"bordercolor="#FF00FF"bordercolorlight="#00FF00"bordercolordark="#00FFFF"cols="2">
  ● width="400"
  表格宽度,承受相对值(如80)及绝对值(如80%)。
  ● border="1"
  表格边框厚度,分歧扫瞄器有分歧的内定值,故请指明。
  ● cellspacing="2"
  表格格线厚度,请看例子三,那是加厚到5的格线。
  ● cellpadding="2"
  笔墨与格线的间隔,请看例子四,那是加至10的padding。
  ● align="CENTER"
  表格的摆放地位(程度),可选值为:left,right,center,请看例子五或六,那表格是放于两头的,为怕一些扫瞄器不增援,故特加上居中标志<CENTER>,只是多层包管而己,固然只用<CENTER>亦可。
  ● valign="TOP".
  表格内书画等的摆放贴 地位(垂直),可选值为:top,middle,bottom。
  ● background="myweb.gif"
  表格 纸,与bgcolor不要同用。
  ● bgcolor="#0000FF"
  表格底色,与background不要同用,请看例子六。
  ● bordercolor="#FF00FF"
  表格边框色彩,NC与IE有分歧的效果,请看例子六。
  ● bordercolorlight="#00FF00"
  表格边框向光部分的色彩,请看例子二。『只合用于IE』
  ● bordercolordark="#00FFFF"
  表格边框背光部分的色彩,请看例子二,利用bordercolorlight或bordercolordark时bordercolor将会生效。『只合用于IE』
  ● cols="2"
  表格栏位数量,只是让扫瞄器鄙人载表格是先画出全部表格而己。
  <TR>的参数设定(经常使用):
  比方:<tralign="RIGHT"valign="MIDDLE"bgcolor="#0000FF"bordercolor="#FF00FF"bordercolorlight="#808080"bordercolordark="#FF0000">
  ● align="RIGHT"
  该一列内书画等的摆放贴 地位(程度),可选值为:left,center,right。
  ● valign="MIDDLE"
  该一列内书画等的摆放贴 地位(垂直),可选值为:top,middle,bottom。
  ● bgcolor="#0000FF"
  该一列底色,请看例子五。
  ● bordercolor="#FF00FF"
  该一列边框色彩,请看例子三。『只合用于IE』
  ● bordercolorlight="#808080"
  该一列边框向光部分的色彩,请看例子三。『只合用于IE』
  ● bordercolordark="#FF0000"
  该一列边框背光部分的色彩,请看例子三,利用bordercolorlight或bordercolordark时bordercolor将会生效。『只合用于IE』
  <TD>的参数设定(经常使用):
  比方:<tdwidth="48%"height="400"colspan="5"rowspan="4"align="RIGHT"valign="BOTTOM"bgcolor="#FF00FF"bordercolor="#808080"bordercolorlight="#FF0000"bordercolordark="#00FF00"background="myweb.gif">
  ● width="48%"
  该一贮存格宽度,承受相对值(如80)及绝对值(如80%)。
  ● height="400"
  该一贮存格高度。
  ● colspan="5"
  该一贮存格向右买通的栏数。请看例子六
  ● rowspan="4"
  该一贮存格向下买通的列数。请看例子六
  ● align="RIGHT"
  该一贮存格内书画等的摆放贴 地位(程度),可选值为:left,center,right。
  ● valign="BOTTOM"
  该一贮存格内书画等的摆放贴 地位(垂直),可选值为:top,middle,bottom。
  ● bgcolor="#FF00FF"
  该一贮存格底色,请看例子四。
  ● bordercolor="#808080"
  该一贮存格边框色彩,请看例子三。『只合用于IE』
  ● bordercolorlight="#FF0000"
  该一贮存格边框向光部分的色彩,请看例子三。『只合用于IE』
  ● bordercolordark="#00FF00"
  该一贮存格边框背光部分的色彩,请看例子三,利用bordercolorlight或bordercolordark时bordercolor将会生效。『只合用于IE』
  ●background="myweb.gif"
  该一贮存格 纸,与bgcolor任用其一。


下一页

</P>
例子一:原始码<tablewidth="60%"border="1">
<tr><td>只要一个贮存格(cell)的表格</td></tr>
</table>显现了局只要一个贮存格(cell)的表格

  例子二:
原始码<tablewidth="60%"border="5"bordercolorlight="#FF00FF"bordercolordark="#FF0000">
<tr><td>第一列第一栏</td><td>第一列第二栏</td></tr>
</table>显现了局第一列第一栏第一列第二栏

  例子三:
原始码<tablewidth="60%"border="1"cellspacing="5">
<trbordercolor="#0000FF"><td>第一列第一栏</td><td>第一列第二栏</td>
</tr>
<trbordercolorlight="#FF00FF"bordercolordark="#00FF00"><td>第二列第一栏</td><td>第二列第二栏</td>
</tr>
</table>显现了局第一列第一栏第一列第二栏第二列第一栏第二列第二栏


例子四:
原始码<tablewidth="60%"border="1"cellpadding="10">
<tr><tdbgcolor="#FFCCE6">第一列第一栏</td><tdbgcolor="#FFFFC6">第一列第二栏</td>
</tr>
<tr><tdbgcolor="#FFD9FF">第二列第一栏</td><tdbgcolor="#DAB4B4">第二列第二栏</td>
</tr>
</table>显现了局第一列第一栏第一列第二栏第二列第一栏第二列第二栏

  例子五:
原始码<center>
<tablewidth="60%"cellspacing="0"cellpadding="2"align="CENTER">
<tr><tdbgcolor="#FFD2E9">第一列第一栏</td><tdbgcolor="#FFDAB5">第一列第二栏</td><tdbgcolor="#FFFFB5">第一列第三栏</td>
</tr>
<trbgcolor="#C0C0C0"><td>第二列第一栏</td><td>第二列第二栏</td><td>第二列第三栏</td>
</tr>
</table>
</center>显现了局
第一列第一栏第一列第二栏第一列第三栏第二列第一栏第二列第二栏第二列第三栏
  例子六
码<center>
<tablewidth="350"border="1"cellspacing="0"cellpadding="2"align="CENTER"bgcolor="#FFC4E1"bordercolor="#0000FF">
<tr><td>第一列第一栏</td><tdcolspan="2">第一列之第二栏落第三栏</td>
</tr>
<tr><tdrowspan="2">第二列落第三列之第一栏</td><td>第二列第二栏</td><td>第二列第三栏</td>
</tr>
<tr><td>第三列第二栏</td><td>第三列第三栏</td>
</tr>
</table>
</center>显现了局
第一列第一栏第一列之第二栏落第三栏第二列落第三列之第一栏第二列第二栏第二列第三栏第三列第二栏第三列第三栏


上一页下一页

</P>
  ■<TH>:

  TH>与<TD>一样是标示一个贮存格,独一分歧的是<TH>所标示的贮存格中的笔墨是以粗体呈现,一般用于表格第一列以标示栏目。它的用法是代替<TD>的地位即可以,其参数设定请参考<TD>。
  
  固然若为<TD>所标示的贮存格中的笔墨加上粗体标志<B>便等如<TH>的效果。
  例子:
原始码<center>
<tablewidth="350"border="1"cellspacing="0"cellpadding="2"align="CENTER">
<tralign="CENTER"><th>Month</th><th>%ofIEvisitor</th><th>%ofNCvisitor</th>
</tr>
<tralign="CENTER"><td>August</td><td>61%</td><td>39%</td>
</tr>
<tralign="CENTER"><td>July</td><td>54%</td><td>46%</td>
</tr>
<tralign="CENTER"><td>June</td><td>52%</td><td>48%</td>
</tr>
</table>
</center>显现了局
Month%ofIEvisitor%ofNCvisitorAugust61%39%July54%46%June52%48%


  ■<CAPTION>:
  <CAPTION>的感化是为表格标示一个题目列,有如在表格上方加上一没格线的买通列。固然亦可置于下方,一般用以寄存该表格的题目。

  <CAPTION>的参数设定(经常使用):
  比方:<captionalign="TOP"valign="TOP"></caption>
  ●align="TOP"
  该表格题目列相对表格的摆放贴 地位(程度),可选值为:left,center,right,top,middle,bottom,若align="bottom"的话题目列便会呈现对表格的下方,不论你的原始码中把<caption>放在<table>中的头部或尾部。
  ●valign="TOP"
  该表格题目列相对表格的摆放地位(高低),可选值为:top,bottom。和align="TOP"或align="BOTTOM"是一样的,固然功效反复了,但假如你要题目列置于下方及向右或向左贴 ,那么两个参数即可一 用了。当只 一个参数时,请首选align,由于valign是由HTML3.0才入手下手的参数。
  例子:
始码<center>
<tablewidth="350"border="1"cellspacing="0"cellpadding="2"align="CENTER">
<caption>网页速成八月份访客扫瞄器利用剖析</caption>
<tralign="CENTER"><th>Month</th><th>%ofIEvisitor</th><th>%ofNCvisitor</th>
</tr>
<tralign="CENTER"><td>August</td><td>61%</td><td>39%</td>
</tr>
</table>
</center>显现了局
网页速成八月份访客扫瞄器利用剖析Month%ofIEvisitor%ofNCvisitorAugust61%39%
</p>上一页
</p>
一些公司联合起来,成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup(Web超文本应用技术工作组-WHATWG)的组织。

金色的骷髅 发表于 2015-1-17 22:59:09

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。

冷月葬花魂 发表于 2015-2-2 14:47:27

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

爱飞 发表于 2015-2-8 01:18:02

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。

飘飘悠悠 发表于 2015-2-24 04:38:41

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

只想知道 发表于 2015-3-7 11:05:42

Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

乐观 发表于 2015-3-15 04:41:17

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

蒙在股里 发表于 2015-3-21 20:46:05

俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
页: [1]
查看完整版本: 来讲讲:HTML言语分析(七) 表格标志