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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 表格（上）
返回列表 发新帖
查看: 2333|回复: 0

[学习笔记] 表格（上）

[复制链接]
zltzlt
发表于 2020-1-22 20:57:09 | 显示全部楼层 |阅读模式

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

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

x
HTML 表格


一个简单的例子：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>表格练习</title>
  5.     </head>
  6.     <body>
  7.         <table>
  8.             <!-- tr 是表格的每一行 -->
  9.             <tr>
  10.                 <!-- th 是表格的表头 -->
  11.                 <th>用户名</th>
  12.                 <th>UID</th>
  13.             </tr>
  14.             <tr>
  15.                 <!-- td 是表格普通的单元格 -->
  16.                 <td>小甲鱼</td>
  17.                 <td>9</td>
  18.             </tr>
  19.             <tr>
  20.                 <td>不二如是</td>
  21.                 <td>378930</td>
  22.             </tr>
  23.             <tr>
  24.                 <td>冬雪雪冬</td>
  25.                 <td>326976</td>
  26.             </tr>
  27.             <tr>
  28.                 <td>zltzlt</td>
  29.                 <td>702609</td>
  30.             </tr>
  31.         </table>
  32.     </body>
  33. </html>
复制代码


显示效果：

搜狗截图20200122203449.png

可以看到，表格默认是不带边框的。

现在我们通过 css 给表格添加边框（设置 border 属性）：

  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.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <table>
  18.             <!-- tr 是表格的每一行 -->
  19.             <tr>
  20.                 <!-- th 是表格的表头 -->
  21.                 <th>用户名</th>
  22.                 <th>UID</th>
  23.             </tr>
  24.             <tr>
  25.                 <!-- td 是表格普通的单元格 -->
  26.                 <td>小甲鱼</td>
  27.                 <td>9</td>
  28.             </tr>
  29.             <tr>
  30.                 <td>不二如是</td>
  31.                 <td>378930</td>
  32.             </tr>
  33.             <tr>
  34.                 <td>冬雪雪冬</td>
  35.                 <td>326976</td>
  36.             </tr>
  37.             <tr>
  38.                 <td>zltzlt</td>
  39.                 <td>702609</td>
  40.             </tr>
  41.         </table>
  42.     </body>
  43. </html>
复制代码


显示效果如下：

1.png

可以看到边框为双实线。我们可以设置 css 属性 border-collapse 为 collapse 设置边框为单实线：

  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.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <table>
  19.             <!-- tr 是表格的每一行 -->
  20.             <tr>
  21.                 <!-- th 是表格的表头 -->
  22.                 <th>用户名</th>
  23.                 <th>UID</th>
  24.             </tr>
  25.             <tr>
  26.                 <!-- td 是表格普通的单元格 -->
  27.                 <td>小甲鱼</td>
  28.                 <td>9</td>
  29.             </tr>
  30.             <tr>
  31.                 <td>不二如是</td>
  32.                 <td>378930</td>
  33.             </tr>
  34.             <tr>
  35.                 <td>冬雪雪冬</td>
  36.                 <td>326976</td>
  37.             </tr>
  38.             <tr>
  39.                 <td>zltzlt</td>
  40.                 <td>702609</td>
  41.             </tr>
  42.         </table>
  43.     </body>
  44. </html>
复制代码


显示效果：

1.png

我们还可以通过 caption 标签设置表格的标题：

  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.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <table>
  19.             <!-- caption 元素用于指定表格的标题 -->
  20.             <caption>鱼 C 论坛</caption>
  21.             <!-- tr 是表格的每一行 -->
  22.             <tr>
  23.                 <!-- th 是表格的表头 -->
  24.                 <th>用户名</th>
  25.                 <th>UID</th>
  26.             </tr>
  27.             <tr>
  28.                 <!-- td 是表格普通的单元格 -->
  29.                 <td>小甲鱼</td>
  30.                 <td>9</td>
  31.             </tr>
  32.             <tr>
  33.                 <td>不二如是</td>
  34.                 <td>378930</td>
  35.             </tr>
  36.             <tr>
  37.                 <td>冬雪雪冬</td>
  38.                 <td>326976</td>
  39.             </tr>
  40.             <tr>
  41.                 <td>zltzlt</td>
  42.                 <td>702609</td>
  43.             </tr>
  44.         </table>
  45.     </body>
  46. </html>
复制代码


显示效果：

1.png

表格看上去特别拥挤，我们可以通过设置 css 属性 padding 设置单元格的内边距：

  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.         </style>
  18.     </head>
  19.     <body>
  20.         <table>
  21.             <!-- caption 元素用于指定表格的标题 -->
  22.             <caption>鱼 C 论坛</caption>
  23.             <!-- tr 是表格的每一行 -->
  24.             <tr>
  25.                 <!-- th 是表格的表头 -->
  26.                 <th>用户名</th>
  27.                 <th>UID</th>
  28.             </tr>
  29.             <tr>
  30.                 <!-- td 是表格普通的单元格 -->
  31.                 <td>小甲鱼</td>
  32.                 <td>9</td>
  33.             </tr>
  34.             <tr>
  35.                 <td>不二如是</td>
  36.                 <td>378930</td>
  37.             </tr>
  38.             <tr>
  39.                 <td>冬雪雪冬</td>
  40.                 <td>326976</td>
  41.             </tr>
  42.             <tr>
  43.                 <td>zltzlt</td>
  44.                 <td>702609</td>
  45.             </tr>
  46.         </table>
  47.     </body>
  48. </html>
复制代码


显示效果：

1.png

这样看上去就好看一些了。

本帖被以下淘专辑推荐:

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2025-5-5 11:25

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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