当前位置: 首页 > 网络学院 > 网页制作基础教程 > WEB设计综合 > 表格详述

WEB设计综合
多姿多彩的网页链接下划线
显示个性化的鼠标指针
什么是web标准
Meta — 容易被忽视的HTML元素
网页制作小秘诀
CSS2盒模型的3D示意图
为什么要抛弃HTML
DIV 和 TABLE 应该如何配合使用
CSS样式表定义链接样式
谈谈CSS样式表的命名规范
CSS常见技巧及问题处理
完全CSS鼠标悬停TIP效果
CSS布局定位系列:相对定位
根据分辨率不同调用不同的css文件
CSS制作的阴影链接文字
用CSS制作的美国国旗
导航上用CSS标志当前页效果
CSS的常用技巧放送
CSS顶级技巧
常用CSS缩写语法总结

WEB设计综合 中的 表格详述


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 1417 ::
收藏到网摘: n/a

Tables are very easy to use and will make your site look more appealing to the eye, while organizing your site's content. Many site uses tables.

表格非常容易使用,它可以使整个网站的内容组织看上去更富视觉效果。很多站点都使用表格。

Here is the most basic table.
下面列举表格的最基本元素。

<table>- lets the computer know there is a table
<table>-
让计算机知道这是一张表格

<tr>- starts a new row
<tr>-
定义一个行

<td>- starts a new cell or box in the row
<td>-
定义行中的单元格或是容器

my content
我的内容

</td>- end a cell in the row
</td>-
行中的单元格结束

</tr>- ends the row
</tr>-
行结束

</table>- lets the computer know the table has ended.
</table>-
让计算机知道表格到此结束

Here is a breakdown of some of the tags associated with the table tag. Of all of the tags below, you should get into the habit of always using the height and width tags, because they help your page load faster.
下面列举一些可以和表格标签配合使用的标签。在下面所有的这些标签当中,你应该学会使用height[高度]width[宽度]标签,因为它可以使得你的页面加载更为迅速。

align- aligning an entire table
align-
定义表格排列方式

background- specifying a background image to the table
background-
为表格指定一张背景图片

bgcolor- specifying a background color
bgcolor-
指定表格的背景色

border- specifying the width of the table border
border-
指定表格的边框宽度

bordercolor- specifying the color of the border
bordercolor-
指定边框颜色

cellpadding- setting the space between a cell's contents and its border
cellpadding-
设置单元格内容与表格边框的距离[内补白]

cellspacing- setting the amount of space between cells
cellspacing-
设置单元格之间的空间距离

height- specifying the height of the table
height-
指定表格高度

width- specifying the width of the table
width-
指定表格宽度

You can create as many cells or rows in a table as you'd like. You can even combine a table into another table.
你可以根据自己的需要创建希望数量的单元格和行。你甚至可以在另一张表格中嵌入表格。

Source
源代码

Result
结果

<table border="1" bordercolor="#000000" cellpadding="5">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1

<table border="1" bordercolor="#000000" cellpadding="5">
<tr>
<td>embeded table, cell 1</td>
</tr>
</table>

</td>
<td>row 2, cell 2</td>
</tr>
</table>

table_result_1


Want to take the double lined borders away? Just add style="border-collapse: collapse" to the table command.
如果你希望去掉双线边框,你只需要加入“ style="border-collapse: collapse" ”这段代码到table命令中就可以了。

Source
原代码

Result
结果

<table border="1" bordercolor="#000000" cellpadding="5" style="border-collapse: collapse">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1

<table border="1" bordercolor="#000000" cellpadding="5" style="border-collapse: collapse">
<tr>
<td>embeded table, cell 1</td>
</tr>
</table>

</td>
<td>row 2, cell 2</td>
</tr>
</table>

 
 

table_result_2

 

评论 (0) All

登陆 | 还没注册?