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

WEB设计综合
连接基础
HTML基础
CSS 基础
添加背景音乐
HTML中的脚本标签
水平线样式
CSS基础以及CSS代码
自定义404错误页
链接至外部样式表
文本和颜色
表格详述
图像详述
优化CSS样式表代码
CSS元素div ul dl dt ol简释
CSS元素的class与ID命名常用关键字
DIV布局SEO的影响
CSS中的相对定位与绝对定位
CSS选择符
CSS特殊选择符伪类的应用技巧
常用的CSS知识

WEB设计综合 中的 表格详述


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 1412 ::
收藏到网摘: 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

登陆 | 还没注册?