鱼C论坛

 找回密码
 立即注册
查看: 1659|回复: 24

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

[复制链接]
最佳答案
213 
发表于 2017-1-14 10:41:25 | 显示全部楼层 |阅读模式
购买主题 本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
3 
发表于 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!!!

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 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 谢谢~~~

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
31 
发表于 2017-7-10 16:30:01 | 显示全部楼层
交!作!业!

turtle_看图王.png

点评

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

评分

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

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 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^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
31 
发表于 2018-4-14 20:32:03 | 显示全部楼层
20180414203126.png

点评

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

评分

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

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
213 
 楼主| 发表于 2017-2-22 06:56:39 | 显示全部楼层
joker11111 发表于 2017-2-21 23:39
定义和用法
定义表格内的表头单元格。
HTML 表单中有两种类型的单元格:

哈哈哈,好吧~

打快了“cos play”是吧

谢谢joker的超鸡拓展!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
213 
 楼主| 发表于 2017-2-22 07:20:53 | 显示全部楼层
joker11111 发表于 2017-2-21 23:39
定义和用法
定义表格内的表头单元格。
HTML 表单中有两种类型的单元格:

表头thead -> 设置为 green -> 只有 -> 鱼C信息表变绿 ->caption
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
31 
发表于 2017-7-10 16:36:17 | 显示全部楼层
把caption提朝前竟然无法居中了
turtle_看图王.png
temp6.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
213 
 楼主| 发表于 2017-7-10 16:47:50 | 显示全部楼层
MSK 发表于 2017-7-10 16:36
把caption提朝前竟然无法居中了

图表,caption位置不能瞎写哦
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
31 
发表于 2017-7-10 16:55:15 | 显示全部楼层
不二如是 发表于 2017-7-10 16:47
图表,caption位置不能瞎写哦

吃一垫长一智
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-7-14 03:23:18 | 显示全部楼层
交作业,做的不太好看,见谅。
019.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-3-7 00:20:28 | 显示全部楼层
[quote][/quote]
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-4-21 16:00:54 | 显示全部楼层
C:\Users\Administrator\Desktop\表格.JPG
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-4-21 16:02:58 | 显示全部楼层
表格.JPG
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 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

交作業了,不二大濕,我想每天進步一點點
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
2 
发表于 2018-7-15 12:58:07 | 显示全部楼层
本帖最后由 STmove 于 2018-7-15 13:07 编辑

交作业啦
  1. <!doctype html>
  2. <html>
  3. <meta charset="uft-8">
  4. <head>
  5. <title>lesson 0019</title>
  6. </head>

  7. <body>
  8.     <style type="text/css">
  9.         caption
  10.         {
  11.             color:#78e;
  12.         }      
  13.         thead
  14.         {
  15.             color:green;
  16.         }
  17.         tbody
  18.         {
  19.             color:blue;
  20.             height:150px;
  21.         }
  22.     </style>
  23.         <!-- border表示表格外框的宽度 -->
  24.     <table border="16" width="50%" align="center">
  25.         <!-- 如果把caption放进thead里,会导致对thead的css格式设置失效 -->
  26.         <caption>caption外部标题</caption>
  27.         <thead>
  28.             <tr>
  29.                 <td colspan="2">合并单元格(colspan=2)</td>
  30.             </tr>
  31.             <tr>
  32.                 <th>姓名</th>
  33.                 <th>年龄</th>
  34.             </tr>
  35.         </thead>
  36.         
  37.         <tbody>
  38.             <tr>
  39.                 <td>小甲鱼老湿</td>
  40.                 <td>28</td>
  41.             </tr>
  42.             <tr>
  43.                 <td>不二老湿</td>
  44.                 <td>18</td>
  45.             </tr>
  46.         </tbody>
  47.     </table>
  48.     <p>刮刮乐测试:<font style="background-color:green; color:green">12345</font></p>
  49. </body>
  50. </html>
复制代码

0019.png
刮刮乐测试:
勇敢的心
勇敢的肝
勇敢的脾
勇敢的肺
勇敢的肾

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
2 
发表于 2018-7-15 13:03:51 | 显示全部楼层
123
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
1 
发表于 2018-9-5 19:48:12 | 显示全部楼层
信息表.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-9-5 20:10:40 | 显示全部楼层
用这个记账
  1. <meta charset="utf-8">
  2. <style type="text/css">
  3.         thead {color:green}
  4.         tbody {color:blue;height:50px}
  5. </style>       
  6. <table border="16" width="66%" align="center">
  7. <thead align="center">
  8.         <tr>
  9.                 <td colspan="3">每日消费表</td>
  10.         </tr>
  11.         <caption>每日消费表</caption>
  12.         <tr>
  13.                 <th>日期</th>
  14.                 <th>消费项目</th>
  15.                 <th>消费金额(RMB)</th>
  16.         </tr>
  17. </thead>

  18. <tbody align="center">
  19.         <tr>
  20.                 <td>2018-9-5</td>
  21.                 <td>梦幻西游点卡</td>
  22.                 <td>5</td>
  23.         </tr>
  24.                        
  25.         <tr>
  26.                 <td>2018-9-5</td>
  27.                 <td>爱奇艺一月会员</td>
  28.                 <td>6</td>
  29.         </tr>
  30.        
  31.         <tr>
  32.                 <td colspan="2">合计</td>
  33.                 <td>11</td>
  34.         </tr>
  35. </tbody>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

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

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

GMT+8, 2018-9-25 00:28

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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