0 0 1 9 - 表格（表单他二哥）

不二如是 · 发表于 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新技能，刮刮乐

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”是吧

谢谢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提朝前竟然无法居中了

不二如是 · 发表于 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位置不能瞎写哦

吃一垫长一智

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

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

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

[quote][/quote]

统冠陶瓷 · 发表于 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

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

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>

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 58370 狗仔卡	发表于 2017-1-14 10:41:25 \| 显示全部楼层 \|阅读模式购买主题已有 32 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 37
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

[庖丁解牛] 0 0 1 9 - 表格（表单他二哥）

本帖被以下淘专辑推荐:

点评

评分

点评

评分

点评

评分

点评

评分

点评

评分