设为首页收藏本站
开启辅助访问 切换到宽版

小白教程

 找回密码
 立即注册
热搜: python PHP html
小白教程»小白交流区 › 技术交流区 › html5和css › HTML网页设计：七、表格
返回列表 发新帖
查看: 6502|回复: 0

[好文分享] HTML网页设计：七、表格

[复制链接]
小白教程

176

主题

185

帖子

663

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
663
发表于 2021-4-16 12:19:06 | 显示全部楼层 |阅读模式
1.表格的定义
        HTML中表格由<table>标签来定义。每个表格均有若干行（由 <tr>标签定义），每行被分割为若干单元格（由<td>标签定义），表格标题由<caption>标签指定,表头由<th>标签指定。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

其定义格式如下：
  1. <table>
  2.                 <tr>
  3.                         <td>第一行第一列</td>
  4.                         <td>第一行第二列</td>
  5.                 </tr>
  6.                 <tr>
  7.                         <td>第二行第一列</td>
  8.                         <td>第二行第二列</td>
  9.                 </tr>
  10.                 <tr>
  11.                         <td>第三行第一列</td>
  12.                         <td>第三行第二列</td>
  13.                 </tr>
  14.         </table>
复制代码

网页显示如下：

1.表格的常用属性

（1）border属性：表格和边框属性，如果不定义边框属性，表格将不显示边框。

代码示例如下：

  1. <table border="1px">
  2.                 <tr>
  3.                         <td>第一行第一列</td>
  4.                         <td>第一行第二列</td>
  5.                 </tr>
  6.                 <tr>
  7.                         <td>第二行第一列</td>
  8.                         <td>第二行第二列</td>
  9.                 </tr>
  10.                 <tr>
  11.                         <td>第三行第一列</td>
  12.                         <td>第三行第二列</td>
  13.                 </tr>
  14.         </table>
复制代码

网页显示如下：

（2）cellspacing属性：规定单元格之间的空间。

一个具有标题和表头，取消单元格之间间距的表格代码示例如下：

  1. <table border="1px" cellspacing="0">
  2.                 <caption>一个表格</caption>
  3.                 <tr>
  4.                         <th>第一列</th>
  5.                         <th>第二列</th>
  6.                 </tr>
  7.                 <tr>
  8.                         <td>第一行第一列</td>
  9.                         <td>第一行第二列</td>
  10.                 </tr>
  11.                 <tr>
  12.                         <td>第二行第一列</td>
  13.                         <td>第二行第二列</td>
  14.                 </tr>
  15.                 <tr>
  16.                         <td>第三行第一列</td>
  17.                         <td>第三行第二列</td>
  18.                 </tr>
  19.         </table>
复制代码

网页显示如下：

（3）cellpadding属性：规定单元边沿与其内容之间的空白。

代码示例如下：

  1. <table border="1px" cellspacing="0" cellpadding="10">
  2.                 <tr>
  3.                         <td>第一行第一列</td>
  4.                         <td>第一行第二列</td>
  5.                 </tr>
  6.                 <tr>
  7.                         <td>第二行第一列</td>
  8.                         <td>第二行第二列</td>
  9.                 </tr>
  10.                 <tr>
  11.                         <td>第三行第一列</td>
  12.                         <td>第三行第二列</td>
  13.                 </tr>
  14.         </table>
复制代码
网页显示如下：


（4）bgcolor属性：向表格或表格单元添加背景颜色。
（5）background属性：向表格或表格单元添加背景图像。
（6）align属性：规定表格或单元格中内容的水平对齐方式。属性值可以取left左对齐、right右对齐、center居中对齐这三种。

align属性练习代码示例：
  1. <table border="1px" cellspacing="0" width="500px" align="center">
  2.                 <tr>
  3.                         <td align="right">第一行第一列</td>
  4.                         <td align="right">第一行第二列</td>
  5.                 </tr>
  6.                 <tr align="center">
  7.                         <td>第二行第一列</td>
  8.                         <td>第二行第二列</td>
  9.                 </tr>
  10.                 <tr align="left">
  11.                         <td>第三行第一列</td>
  12.                         <td>第三行第二列</td>
  13.                 </tr>
  14.         </table>
复制代码

网页显示如下：

3.跨行、跨列单元格

表格中的跨列单元格使用colspan属性，跨行单元格使用rowspan属性。

代码示例如下：

  1. <table border="1" cellspacing="0" width="400px">
  2.                 <caption>课程表</caption>
  3.                 <tr>
  4.                         <th rowspan="2">时间\星期</th>
  5.                         <th colspan="5">星期</th>
  6.                 </tr>
  7.                 <tr>
  8.                         <th>星期一</th>
  9.                         <th>星期二</th>
  10.                         <th>星期三</th>
  11.                         <th>星期四</th>
  12.                         <th>星期五</th>
  13.                 </tr>
  14.                 <tr>
  15.                         <th rowspan="2">上午</th>
  16.                         <td>语文</td>
  17.                         <td>语文</td>
  18.                         <td>语文</td>
  19.                         <td>语文</td>
  20.                         <td>语文</td>
  21.                 </tr>
  22.                 <tr>
  23.                         <td>语文</td>
  24.                         <td>语文</td>
  25.                         <td>语文</td>
  26.                         <td>语文</td>
  27.                         <td>语文</td>
  28.                 </tr>
  29.                 <tr>
  30.                         <th rowspan="2">下午</th>
  31.                         <td>数学</td>
  32.                         <td>数学</td>
  33.                         <td>数学</td>
  34.                         <td>数学</td>
  35.                         <td>数学</td>
  36.                 </tr>
  37.                 <tr>
  38.                         <td>数学</td>
  39.                         <td>数学</td>
  40.                         <td>数学</td>
  41.                         <td>数学</td>
  42.                         <td>数学</td>
  43.                 </tr>
  44.                
  45.         </table>

复制代码
网页显示如图：

所有代码如下：
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>表格学习</title>
  6. </head>
  7. <body>
  8. <!--        不带边框的表格-->
  9.         <table>
  10.                 <tr>
  11.                         <td>第一行第一列</td>
  12.                         <td>第一行第二列</td>
  13.                 </tr>
  14.                 <tr>
  15.                         <td>第二行第一列</td>
  16.                         <td>第二行第二列</td>
  17.                 </tr>
  18.                 <tr>
  19.                         <td>第三行第一列</td>
  20.                         <td>第三行第二列</td>
  21.                 </tr>
  22.         </table>
  23.         <br/>
  24. <!--        带边框的表格-->
  25.         <table border="1px">
  26.                 <tr>
  27.                         <td>第一行第一列</td>
  28.                         <td>第一行第二列</td>
  29.                 </tr>
  30.                 <tr>
  31.                         <td>第二行第一列</td>
  32.                         <td>第二行第二列</td>
  33.                 </tr>
  34.                 <tr>
  35.                         <td>第三行第一列</td>
  36.                         <td>第三行第二列</td>
  37.                 </tr>
  38.         </table>
  39.         <br/>
  40. <!--取消单元格间距        带边框的表格 带标题和表头-->
  41.         <table border="1px" cellspacing="0" >
  42.                 <caption>一个表格</caption>
  43.                 <tr>
  44.                         <th>第一列</th>
  45.                         <th>第二列</th>
  46.                 </tr>
  47.                 <tr>
  48.                         <td>第一行第一列</td>
  49.                         <td>第一行第二列</td>
  50.                 </tr>
  51.                 <tr>
  52.                         <td>第二行第一列</td>
  53.                         <td>第二行第二列</td>
  54.                 </tr>
  55.                 <tr>
  56.                         <td>第三行第一列</td>
  57.                         <td>第三行第二列</td>
  58.                 </tr>
  59.         </table>
  60.         <br/>
  61. <!--        规定单元边沿与其内容之间的间距为10-->
  62.         <table border="1px" cellspacing="0" cellpadding="10">
  63.                 <tr>
  64.                         <td>第一行第一列</td>
  65.                         <td>第一行第二列</td>
  66.                 </tr>
  67.                 <tr>
  68.                         <td>第二行第一列</td>
  69.                         <td>第二行第二列</td>
  70.                 </tr>
  71.                 <tr>
  72.                         <td>第三行第一列</td>
  73.                         <td>第三行第二列</td>
  74.                 </tr>
  75.         </table>        
  76.         <br/>
  77. <!--        align属性练习-->
  78.         <table border="1px" cellspacing="0" width="500px" align="center">
  79.                 <tr>
  80.                         <td align="right">第一行第一列</td>
  81.                         <td align="right">第一行第二列</td>
  82.                 </tr>
  83.                 <tr align="center">
  84.                         <td>第二行第一列</td>
  85.                         <td>第二行第二列</td>
  86.                 </tr>
  87.                 <tr align="left">
  88.                         <td>第三行第一列</td>
  89.                         <td>第三行第二列</td>
  90.                 </tr>
  91.         </table>        
  92.         <br/>
  93. <!--        跨行列练习-->
  94.         <table border="1" cellspacing="0" width="400px">
  95.                 <caption>课程表</caption>
  96.                 <tr>
  97.                         <th rowspan="2">时间\星期</th>
  98.                         <th colspan="5">星期</th>
  99.                 </tr>
  100.                 <tr>
  101.                         <th>星期一</th>
  102.                         <th>星期二</th>
  103.                         <th>星期三</th>
  104.                         <th>星期四</th>
  105.                         <th>星期五</th>
  106.                 </tr>
  107.                 <tr>
  108.                         <th rowspan="2">上午</th>
  109.                         <td>语文</td>
  110.                         <td>语文</td>
  111.                         <td>语文</td>
  112.                         <td>语文</td>
  113.                         <td>语文</td>
  114.                 </tr>
  115.                 <tr>
  116.                         <td>语文</td>
  117.                         <td>语文</td>
  118.                         <td>语文</td>
  119.                         <td>语文</td>
  120.                         <td>语文</td>
  121.                 </tr>
  122.                 <tr>
  123.                         <th rowspan="2">下午</th>
  124.                         <td>数学</td>
  125.                         <td>数学</td>
  126.                         <td>数学</td>
  127.                         <td>数学</td>
  128.                         <td>数学</td>
  129.                 </tr>
  130.                 <tr>
  131.                         <td>数学</td>
  132.                         <td>数学</td>
  133.                         <td>数学</td>
  134.                         <td>数学</td>
  135.                         <td>数学</td>
  136.                 </tr>
  137.                
  138.         </table>
  139. </body>
  140. </html>
复制代码


本帖寻求最佳方案

，目前已有 0 个回复 我要奖励

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|小白教程 ( 粤ICP备20019910号 )

GMT+8, 2024-9-20 14:31 , Processed in 0.037458 second(s), 21 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc. Template By 【未来科技】【 www.wekei.cn 】

快速回复 返回顶部 返回列表