HTML表格

作者: 鲁智深 分类: HTML 发布时间: 2013-09-08 19:51

在本文中,你将学习建立可用于控制web内容中表格化数据的间隔,布局和外观的html表格的方法。尽管你可以使用css产生相似的结果,但是有时候表格绝对是表达信息的最佳的方式。

你们会发现表格会信息的排列是很有用的。我将解释设计人员在过去是如何使用表格进行布局,这并不是最好的思路,在我们开始之前请记住表格是竖向列和横向行中内容的有序排序。

创建简单表格的方法

表格是由多行信息组成,每行包含单元格,要创建表格,必须以<table>标签开始,</table>标签结束。如果要显示表格边框,使用boder属性来定义边框的宽度,单位像素,边框宽度为0或者none将隐藏边框,这在使用表格昨晚网页布局工具是很方便。

表格代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<table border="1">
<tbody>
<tr>
<th>网站</th>
<th>seo</th>
<th>wordpress</th>
<th>主题</th>
<th>扯淡</th>
<th>插件</th>
</tr>
<tr>
<th>数量</th>
<td valign="top" height="100">置顶</td>
<td align="center">水平对齐</td>
<td align="left">左边对齐</td>
<td align="right">右边对齐</td>
<td valign="middle">垂直</td>
</tr>
<tr>
<th>重量</th>
<td rowspan="3">3</td>
<td>单元格七</td>
<td>单元格八</td>
<td>单元格九</td>
<td>单元格十</td>
</tr>
<tr>
<th>时间</th>
<td colspan="4">4</td>
</tr>
<tr>
<th>站长</th>
<td>单元格十六</td>
<td>单元格十七</td>
<td>单元格十八</td>
<td>单元格十九</td>
</tr>
</tbody>
</table>

效果图

网站 seo wordpress 主题 扯淡 插件
数量 置顶 水平对齐 左边对齐 右边对齐 垂直
重量 跨3行 单元格七 单元格八 单元格九 单元格十
时间 跨4列
站长 单元格十六 单元格十七 单元格十八 单元格十九

表格标签含义

border边框

1
2
3
4
5
6
     <br/>---------table表格标签 属性 border边框 ----------<br />
     <table border="1" width="100px" height="100px">
        <tr>
          <td></td>
        </tr>
     </table>

实线

1
2
3
4
5
6
     <br/>---------table表格标签 属性 实线 ----------<br />
     <table border="1" width="100px" height="100px" cellspacing="0">
        <tr>
          <td></td>
        </tr>
     </table>

一行三列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
     <br/>---------table表格一行三列 ----------<br />
     <table border="1" width="400px" height="200px" cellspacing="0">
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
     </table>

align表格横向显示位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
     <br/>---------table表格 align表格横向显示位置 ----------<br />
       <table border="1" width="400px" height="200px" cellspacing="0" align="center">
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
     </table>

valign表格上下显示位置top顶部 bottom底部 middle中间

1
2
3
4
5
6
7
8
     <br/>---------table表格 valign表格上下显示位置top顶部 bottom底部 middle中间  ----------<br />
     <table border="1" cellspacing="0" width="400px" height="200px">
        <tr>
          <td valign="top">1</td>
          <td valign="bottom">2</td>
          <td valign="middle">3</td>
        </tr>
     </table>

td宽度为100px,那么下面的宽度也是100px 高度也同样如此height

1
2
3
4
5
6
7
8
9
10
11
12
13
      <br/>---------table表格 td宽度为100px,那么下面的宽度也是100px 高度也同样如此height----------<br />
      <table border="1" cellspacing="0">
          <tr height="100px">
             <td width="100px">1</td>
             <td>2</td>
             <td>3</td>
          </tr>
          <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
          </tr>
      </table>

rowspan 跨行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<br/>---------rowspan 跨行------------<br />
      <table border="1" cellspacing="0" width="500px" height="500px">
         <tr>
           <td rowspan="2"</td>
           <td></td>
           <td></td>
         </tr>
         <tr>
           <td></td>
           <td></td>
         </tr>
         <tr>
           <td></td>
           <td></td>
           <td></td>
         </tr>
      </table>

rowspan 跨列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
      <br/>---------rowspan 跨列------------<br />
      <table border="1" cellspacing="0" width="500px" height="500px">
         <tr>
           <td rowspan="2"</td>
           <td></td>
           <td></td>
         </tr>
         <tr>
           <td></td>
           <td></td>
         </tr>
         <tr>
           <td></td>
           <td colspan="2"></td>
         </tr>
      </table>

由于表格布局的网站存在着加载缓慢,布局麻烦等问题,现如今的网站已经不再使用表格布局。但是表格也有其优越的地方(ps:能有条理解释内容),所以表格在网页制作中有其作用的地方。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注