不二如是 发表于 2017-1-14 10:41:25

已有 32 人购买  本主题需向作者支付 2 鱼币 才能浏览 购买主题

joker11111 发表于 2017-2-21 23:39:26

本帖最后由 joker11111 于 2017-2-22 15:47 编辑




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

GET新技能，刮刮乐{:10_298:}

shishunfu 发表于 2017-4-20 11:29:27

交作业<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Table表格</title>
        <style>
                caption{color: red}
                thead {color:green}
                tbody {color:blue}
        </style>
</head>
<body>
<table border="10" align="center" style="width: 66%; text-align: center" >
        <!--caption 元素定义表格标题。caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。-->
        <caption id="caption">鱼C信息表</caption>
        <thead>
        <tr>
                <td colspan="3">鱼C信息表</td>
        </tr>
        </thead><!--<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。-->
       
        <tfoot>
        <tr>
                <td colspan="3">我有一头小毛驴，但我从来都不骑！</td>
        </tr>
        </tfoot><!--<tfoot> 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。-->

        <tbody>
        <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>技术值</th>
        </tr>
        <tr>
                <td>小甲鱼老湿</td>
                <td>28</td>
                <td>技术爆表..</td>
        </tr>
        <tr>
                <td>不二老大</td>
                <td>20</td>
                <td>技术爆表..</td>
        </tr>
        <tr>
                <td>ssf</td>
                <td>18</td>
                <td>摸打滚爬</td>
        </tr>
        </tbody><!--<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。-->
        <!--注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。-->
</table>
</body>
</html>


@不二如是文章说表头是caption这里有误，caption是表格外的标题！请修改

MSK 发表于 2017-7-10 16:30:01

交！作！业！

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>

像番茄加两个蛋 发表于 2018-4-14 20:32:03

不二如是 发表于 2017-2-22 06:56:39

joker11111 发表于 2017-2-21 23:39
定义和用法
定义表格内的表头单元格。
HTML 表单中有两种类型的单元格：


哈哈哈，好吧～

打快了“cos play”是吧{:5_92:}

谢谢joker的超鸡拓展！

不二如是 发表于 2017-2-22 07:20:53

joker11111 发表于 2017-2-21 23:39
定义和用法
定义表格内的表头单元格。
HTML 表单中有两种类型的单元格：


表头thead -> 设置为 green -> 只有 -> 鱼C信息表变绿 ->caption

MSK 发表于 2017-7-10 16:36:17

把caption提朝前竟然无法居中了{:10_282:}

不二如是 发表于 2017-7-10 16:47:50

MSK 发表于 2017-7-10 16:36
把caption提朝前竟然无法居中了

图表，caption位置不能瞎写哦

MSK 发表于 2017-7-10 16:55:15

不二如是 发表于 2017-7-10 16:47
图表，caption位置不能瞎写哦

吃一垫长一智{:10_297:}

aswyamato1989 发表于 2017-7-14 03:23:18

交作业，做的不太好看，见谅。

朝圣山 发表于 2018-3-7 00:20:28

{:5_111:}

统冠陶瓷 发表于 2018-4-21 16:00:54

C:\Users\Administrator\Desktop\表格.JPG

统冠陶瓷 发表于 2018-4-21 16:02:58

rock5442107 发表于 2018-6-4 22:57:18

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title>歡迎來到HTML世界</title>
        <style text="css">
        thead{
                color:green;
        }
        tbody{
                color:blue;height:50px;
        }

        </style>
</head>
<body>
        <table border="16" width="66%" align="center">
                <thead>
                <tr>
                        <td colspan="3" align="center">魚C信息表</td>
                </tr>
                <caption>魚C信息表</caption>
                <tr>
                        <th>姓名</th>
                        <th>年齡</th>
                        <th>備註</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                        <td>小甲魚老師</td>
                        <td>28歲</td>
                        <td>大濕</td>
                </tr>
                <tr>
                        <td>不二如是</td>
                        <td>18</td>
                        <td>大濕兄</td>
                </tr>
                <tr>
                        <td colspan="3" align="center">底層覆蓋</td>
                </tr>
                </tbody>
        </table>
</body>
</html>



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

STmove 发表于 2018-7-15 12:58:07

本帖最后由 STmove 于 2018-7-15 13:07 编辑

交作业啦<!doctype html>
<html>
<meta charset="uft-8">
<head>
<title>lesson 0019</title>
</head>

<body>
    <style type="text/css">
      caption
      {
            color:#78e;
      }      
      thead
      {
            color:green;
      }
      tbody
      {
            color:blue;
            height:150px;
      }
    </style>
      <!-- border表示表格外框的宽度 -->
    <table border="16" width="50%" align="center">
      <!-- 如果把caption放进thead里，会导致对thead的css格式设置失效 -->
      <caption>caption外部标题</caption>
      <thead>
            <tr>
                <td colspan="2">合并单元格（colspan=2）</td>
            </tr>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
      </thead>
      
      <tbody>
            <tr>
                <td>小甲鱼老湿</td>
                <td>28</td>
            </tr>
            <tr>
                <td>不二老湿</td>
                <td>18</td>
            </tr>
      </tbody>
    </table>
    <p>刮刮乐测试：<font style="background-color:green; color:green">12345</font></p>
</body>
</html>

刮刮乐测试：
勇敢的心
勇敢的肝
勇敢的脾
勇敢的肺
勇敢的肾

STmove 发表于 2018-7-15 13:03:51

123

船到桥头自然沉 发表于 2018-9-5 19:48:12

{:10_279:}

dys376820508 发表于 2018-9-5 20:10:40

用这个记账
<meta charset="utf-8">
<style type="text/css">
        thead {color:green}
        tbody {color:blue;height:50px}
</style>       
<table border="16" width="66%" align="center">
<thead align="center">
        <tr>
                <td colspan="3">每日消费表</td>
        </tr>
        <caption>每日消费表</caption>
        <tr>
                <th>日期</th>
                <th>消费项目</th>
                <th>消费金额(RMB)</th>
        </tr>
</thead>

<tbody align="center">
        <tr>
                <td>2018-9-5</td>
                <td>梦幻西游点卡</td>
                <td>5</td>
        </tr>
                       
        <tr>
                <td>2018-9-5</td>
                <td>爱奇艺一月会员</td>
                <td>6</td>
        </tr>
       
        <tr>
                <td colspan="2">合计</td>
                <td>11</td>
        </tr>
</tbody>
页: [1] 2
查看完整版本: 0 0 1 9 - 表格（表单他二哥）