设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › HTML 表格（下）
返回列表 发新帖
查看: 1676|回复: 0

[学习笔记] HTML 表格（下）

[复制链接]
zltzlt
发表于 2020-1-24 23:21:38 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

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

x
HTML 表格


1. 设置单元格背景色和文字颜色

设置单元格背景色和文字颜色要用到 CSS 的 background 和 color 属性。例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>表格练习</title>
  5.         <style>
  6.             table, th, td {
  7.                 /*
  8.                 1px 指定边框宽度为 1 像素
  9.                 solid 指定边框为实线
  10.                 red 指定边框的颜色为红色
  11.                 */
  12.                 border: 1px solid red;
  13.                 border-collapse: collapse;
  14.                 /* 这里设置内边距为 5 像素 */
  15.                 padding: 5px;
  16.             }
  17.             /* 表头的背景色为 #999999，文字颜色为 #2eb14f */
  18.             th {
  19.                 background: #999999;
  20.                 color: #2eb14f;
  21.             }
  22.             /* 单元格的背景色为 #ab90b9，文字颜色为 #4744ff */
  23.             td {
  24.                 background: #ab90b9;
  25.                 color: #4744ff;
  26.             }
  27.         </style>
  28.     </head>
  29.     <body>
  30.         <table>
  31.             <!-- caption 元素用于指定表格的标题 -->
  32.             <caption>
  33.                 鱼 C 论坛
  34.             </caption>
  35.             <!-- tr 是表格的每一行 -->
  36.             <tr>
  37.                 <!-- th 是表格的表头 -->
  38.                 <th>用户名</th>
  39.                 <th>UID</th>
  40.             </tr>
  41.             <tr>
  42.                 <!-- td 是表格普通的单元格 -->
  43.                 <td>小甲鱼</td>
  44.                 <td>9</td>
  45.             </tr>
  46.             <tr>
  47.                 <td>不二如是</td>
  48.                 <td>378930</td>
  49.             </tr>
  50.             <tr>
  51.                 <td>冬雪雪冬</td>
  52.                 <td>326976</td>
  53.             </tr>
  54.             <tr>
  55.                 <td>zltzlt</td>
  56.                 <td>702609</td>
  57.             </tr>
  58.         </table>
  59.     </body>
  60. </html>
复制代码


显示效果：

1.png

2. thead、tbody 和 tfoot

thead、tbody、tfoot 元素用于将表格划分为表头、表格体和表尾三个部分。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>表格练习</title>
  5.         <style>
  6.             table, th, td {
  7.                 /*
  8.                 1px 指定边框宽度为 1 像素
  9.                 solid 指定边框为实线
  10.                 red 指定边框的颜色为红色
  11.                 */
  12.                 border: 1px solid red;
  13.                 border-collapse: collapse;
  14.                 /* 这里设置内边距为 5 像素 */
  15.                 padding: 5px;
  16.             }
  17.             /* 表头的背景色为 #999999，文字颜色为 #2eb14f */
  18.             th {
  19.                 background: #999999;
  20.                 color: #2eb14f;
  21.             }
  22.             /* 单元格的背景色为 #ab90b9，文字颜色为 #4744ff */
  23.             td {
  24.                 background: #ab90b9;
  25.                 color: #4744ff;
  26.             }
  27.         </style>
  28.     </head>
  29.     <body>
  30.         <table>
  31.             <!-- caption 元素用于指定表格的标题 -->
  32.             <caption>鱼 C 论坛</caption>
  33.             <!-- thead 表格表头 -->
  34.             <thead>
  35.                 <tr>
  36.                     <th>用户名</th>
  37.                     <th>UID</th>
  38.                 </tr>
  39.             </thead>
  40.             <!-- tbody 表格主体 -->
  41.             <tbody>
  42.                 <tr>
  43.                     <!-- td 是表格普通的单元格 -->
  44.                     <td>小甲鱼</td>
  45.                     <td>9</td>
  46.                 </tr>
  47.                 <tr>
  48.                     <td>不二如是</td>
  49.                     <td>378930</td>
  50.                 </tr>
  51.                 <tr>
  52.                     <td>冬雪雪冬</td>
  53.                     <td>326976</td>
  54.                 </tr>
  55.                 <tr>
  56.                     <td>zltzlt</td>
  57.                     <td>702609</td>
  58.                 </tr>
  59.             </tbody>
  60.         </table>
  61.         <tfoot>
  62.             <p>来源于：<a href="https://fishc.com.cn">鱼 C 论坛</a></p>
  63.         </tfoot>
  64.     </body>
  65. </html>
复制代码


显示效果：

1.png

3. 跨行显示

th 和 td 元素有 rowspan 和 colspan，用于设置该单元格横跨的列数或纵跨的行数。例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>表格练习</title>
  5.         <style>
  6.             table, th, td {
  7.                 /*
  8.                 1px 指定边框宽度为 1 像素
  9.                 solid 指定边框为实线
  10.                 red 指定边框的颜色为红色
  11.                 */
  12.                 border: 1px solid red;
  13.                 border-collapse: collapse;
  14.                 /* 这里设置内边距为 5 像素 */
  15.                 padding: 5px;
  16.             }
  17.             /* 表头的背景色为 #999999，文字颜色为 #2eb14f */
  18.             th {
  19.                 background: #999999;
  20.                 color: #2eb14f;
  21.             }
  22.             /* 单元格的背景色为 #ab90b9，文字颜色为 #4744ff */
  23.             td {
  24.                 background: #ab90b9;
  25.                 color: #4744ff;
  26.             }
  27.         </style>
  28.     </head>
  29.     <body>
  30.         <table>
  31.             <!-- caption 元素用于指定表格的标题 -->
  32.             <caption>鱼 C 论坛</caption>
  33.             <!-- thead 表格表头 -->
  34.             <thead>
  35.                 <tr>
  36.                     <th></th>
  37.                     <th>用户名</th>
  38.                     <th>UID</th>
  39.                 </tr>
  40.             </thead>
  41.             <!-- tbody 表格主体 -->
  42.             <tbody>
  43.                 <tr>
  44.                     <!-- 横跨 5 行 -->
  45.                     <th rowspan="5">每个人</th>
  46.                     <!-- 横跨 3 列 -->
  47.                     <th colspan="2">以下是信息：</th>
  48.                 </tr>
  49.                 <tr>
  50.                     <td>小甲鱼</td>
  51.                     <td>9</td>
  52.                 </tr>
  53.                 <tr>
  54.                     <td>不二如是</td>
  55.                     <td>378930</td>
  56.                 </tr>
  57.                 <tr>
  58.                     <td>冬雪雪冬</td colspan="2">
  59.                     <td>326976</td>
  60.                 </tr>
  61.                 <tr>
  62.                     <td>zltzlt</td colspan="2">
  63.                     <td>702609</td>
  64.                 </tr>
  65.             </tbody>
  66.         </table>
  67.         <tfoot>
  68.             <p>来源于：<a href="https://fishc.com.cn">鱼 C 论坛</a></p>
  69.         </tfoot>
  70.     </body>
  71. </html>
复制代码


显示效果：

1.png

4. 设置列样式

通过 colgroup 和 col 元素可以设置每一列的样式。例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>colgroup 练习</title>
  5.         <style>
  6.             table, th, td {
  7.                 border: 1px solid red;
  8.                 border-collapse: collapse;
  9.             }
  10.         </style>
  11.     </head>
  12.     <body>
  13.         <table>
  14.             <!-- 设置第 1 列背景为蓝色，第 2、3 列背景为橙色 -->
  15.             <colgroup>
  16.                 <col style="background: blue;" />
  17.                 <!-- span 属性表示横跨两列 -->
  18.                 <col span="2" style="background: orange;" />
  19.             </colgroup>
  20.             <tr>
  21.                 <td>1</td>
  22.                 <td>2</td>
  23.                 <td>3</td>
  24.             </tr>
  25.             <tr>
  26.                 <td>4</td>
  27.                 <td>5</td>
  28.                 <td>6</td>
  29.             </tr>
  30.             <tr>
  31.                 <td>7</td>
  32.                 <td>8</td>
  33.                 <td>9</td>
  34.             </tr>
  35.         </table>
  36.     </body>
  37. </html>
复制代码


显示效果：

1.png

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

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

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-26 22:28

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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