QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 1378|回复: 20

[系列教程] 0 0 1 9 - 表格(表单他二哥)

[复制链接]
最佳答案
150 
累计签到:687 天
连续签到:215 天
不二如是 发表于 2017-1-14 10:41:25 137820 | 显示全部楼层 |阅读模式
购买主题 已有 25 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
3 
累计签到:412 天
连续签到:1 天
joker11111 发表于 2017-2-21 23:39:26 | 显示全部楼层
本帖最后由 joker11111 于 2017-2-22 15:47 编辑

333333.jpg

444444444444.jpg
<th></th>定义和用法
定义表格内的表头单元格。
HTML 表单中有两种类型的单元格:
表头单元格 - 包含表头信息(由 th 元素创建)
标准单元格 - 包含数据(由 td 元素创建)
th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本。
因此,<thead align="center">中的align="center"并没有效果,可以删掉。

GET新技能,刮刮乐
111111111.jpg
222222222.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-2-22 06:56

评分

参与人数 1荣誉 +10 鱼币 +10 贡献 +5 收起 理由
不二如是 + 10 + 10 + 5 高UGC!!!

查看全部评分

最佳答案
0 
累计签到:137 天
连续签到:1 天
shishunfu 发表于 2017-4-20 11:29:27 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>Table表格</title>
  6.         <style>
  7.                 caption{color: red}
  8.                 thead {color:green}
  9.                 tbody {color:blue}
  10.         </style>
  11. </head>
  12. <body>
  13. <table border="10" align="center" style="width: 66%; text-align: center" >
  14.         <!--caption 元素定义表格标题。caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。-->
  15.         <caption id="caption">鱼C信息表</caption>
  16.         <thead>
  17.         <tr>
  18.                 <td colspan="3">鱼C信息表</td>
  19.         </tr>
  20.         </thead><!--<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。-->
  21.        
  22.         <tfoot>
  23.         <tr>
  24.                 <td colspan="3">我有一头小毛驴,但我从来都不骑!</td>
  25.         </tr>
  26.         </tfoot><!--<tfoot> 标签定义表格的页脚(脚注或表注)。该标签用于组合 HTML 表格中的表注内容。-->

  27.         <tbody>
  28.         <tr>
  29.                 <th>姓名</th>
  30.                 <th>年龄</th>
  31.                 <th>技术值</th>
  32.         </tr>
  33.         <tr>
  34.                 <td>小甲鱼老湿</td>
  35.                 <td>28</td>
  36.                 <td>技术爆表..</td>
  37.         </tr>
  38.         <tr>
  39.                 <td>不二老大</td>
  40.                 <td>20</td>
  41.                 <td>技术爆表..</td>
  42.         </tr>
  43.         <tr>
  44.                 <td>ssf</td>
  45.                 <td>18</td>
  46.                 <td>摸打滚爬</td>
  47.         </tr>
  48.         </tbody><!--<tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。-->
  49.         <!--注释:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。-->
  50. </table>
  51. </body>
  52. </html>
复制代码



@不二如是  文章说表头是caption这里有误,caption是表格外的标题!请修改
0015.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-4-20 11:45

评分

参与人数 1荣誉 +10 鱼币 +10 贡献 +5 收起 理由
不二如是 + 10 + 10 + 5 谢谢~~~

查看全部评分

最佳答案
30 
累计签到:158 天
连续签到:1 天
MSK 发表于 2017-7-10 16:30:01 | 显示全部楼层
交!作!业!

turtle_看图王.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-7-10 16:47

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 热爱鱼C^_^

查看全部评分

最佳答案
0 
累计签到:119 天
连续签到:1 天
likesunshine 发表于 2018-3-12 11:31:19 | 显示全部楼层
交作业,为什么我的thead和tfoot都不在中间,代码按照楼上的写的
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>表格(表单他二哥)</title>
                <style>
                        caption{color:red}
                        thead{color:yellow}
                        tbody{color:green}
                </style>
        </head>
        <body>
        <table border="10" align="center" style="width: 60%" text-align="center">
                <caption>鱼C信息表</caption>
                <thead>
                <tr>
                        <td colspan="3">鱼C信息表</td>
                </tr>
                </thead>
                <tfoot>
                        <tr>
                                <td colspan="3">好好学习,天天向上</td>
                        </tr>
                </tfoot>
                <tbody>
                        <tr>
                                <th>姓名</th>
                                <th>年龄</th>
                                <th>计数值</th>
                        </tr>
                        <tr>
                                <th>小甲鱼</th>
                                <th>29</th>
                                <th>大神</th>
                        </tr>
                        <tr>
                                <th>不二如是</th>
                                <th>不详</th>
                                <th>大神</th>
                        </tr>
                                <th>likesunshine</th>
                                <th>不便讲</th>
                                <th>小菜鸟</th>
                        </tr>
                </tbody>
        </table>
        </body>
</html>
360截图20180312113101518.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-4-15 15:38

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 热爱鱼C^_^

查看全部评分

最佳答案
29 
累计签到:175 天
连续签到:1 天
像番茄加两个蛋 发表于 2018-4-14 20:32:03 | 显示全部楼层
20180414203126.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-4-15 15:37

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 热爱鱼C^_^

查看全部评分

最佳答案
150 
累计签到:687 天
连续签到:215 天
不二如是  楼主| 发表于 2017-2-22 06:56:39 | 显示全部楼层
joker11111 发表于 2017-2-21 23:39
定义和用法
定义表格内的表头单元格。
HTML 表单中有两种类型的单元格:

哈哈哈,好吧~

打快了“cos play”是吧

谢谢joker的超鸡拓展!
最佳答案
150 
累计签到:687 天
连续签到:215 天
不二如是  楼主| 发表于 2017-2-22 07:20:53 | 显示全部楼层
joker11111 发表于 2017-2-21 23:39
定义和用法
定义表格内的表头单元格。
HTML 表单中有两种类型的单元格:

表头thead -> 设置为 green -> 只有 -> 鱼C信息表变绿 ->caption
最佳答案
30 
累计签到:158 天
连续签到:1 天
MSK 发表于 2017-7-10 16:36:17 | 显示全部楼层
把caption提朝前竟然无法居中了
turtle_看图王.png
temp6.png
最佳答案
150 
累计签到:687 天
连续签到:215 天
不二如是  楼主| 发表于 2017-7-10 16:47:50 | 显示全部楼层
MSK 发表于 2017-7-10 16:36
把caption提朝前竟然无法居中了

图表,caption位置不能瞎写哦
最佳答案
30 
累计签到:158 天
连续签到:1 天
MSK 发表于 2017-7-10 16:55:15 | 显示全部楼层
不二如是 发表于 2017-7-10 16:47
图表,caption位置不能瞎写哦

吃一垫长一智
最佳答案
0 
累计签到:703 天
连续签到:1 天
aswyamato1989 发表于 2017-7-14 03:23:18 | 显示全部楼层
交作业,做的不太好看,见谅。
019.jpg
最佳答案
0 
累计签到:123 天
连续签到:1 天
朝圣山 发表于 2018-3-7 00:20:28 | 显示全部楼层
[quote][/quote]
最佳答案
0 
累计签到:13 天
连续签到:1 天
统冠陶瓷 发表于 2018-4-21 16:00:54 | 显示全部楼层
C:\Users\Administrator\Desktop\表格.JPG
最佳答案
0 
累计签到:13 天
连续签到:1 天
统冠陶瓷 发表于 2018-4-21 16:02:58 | 显示全部楼层
表格.JPG
最佳答案
0 
累计签到:135 天
连续签到:1 天
rock5442107 发表于 2018-6-4 22:57:18 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>歡迎來到HTML世界</title>
  6.         <style text="css">
  7.         thead{
  8.                 color:green;
  9.         }
  10.         tbody{
  11.                 color:blue;height:50px;
  12.         }

  13.         </style>
  14. </head>
  15. <body>
  16.         <table border="16" width="66%" align="center">
  17.                 <thead>
  18.                 <tr>
  19.                         <td colspan="3" align="center">魚C信息表</td>
  20.                 </tr>
  21.                 <caption>魚C信息表</caption>
  22.                 <tr>
  23.                         <th>姓名</th>
  24.                         <th>年齡</th>
  25.                         <th>備註</th>
  26.                 </tr>
  27.                 </thead>
  28.                 <tbody>
  29.                 <tr>
  30.                         <td>小甲魚老師</td>
  31.                         <td>28歲</td>
  32.                         <td>大濕</td>
  33.                 </tr>
  34.                 <tr>
  35.                         <td>不二如是</td>
  36.                         <td>18</td>
  37.                         <td>大濕兄</td>
  38.                 </tr>
  39.                 <tr>
  40.                         <td colspan="3" align="center">底層覆蓋</td>
  41.                 </tr>
  42.                 </tbody>
  43.         </table>
  44. </body>
  45. </html>
复制代码


019.jpg

交作業了,不二大濕,我想每天進步一點點

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /1 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.3 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-6-21 12:57

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