美文网首页
【HTML笔记】_表格基础one

【HTML笔记】_表格基础one

作者: 大婶N72 | 来源:发表于2017-09-20 02:08 被阅读22次

为了写页面硬着头皮上HTML,一切从0开始,但愿我能OK!

html5.jpg

【表格构成】
<table></table> 表格
<thead></thead> 表格的头部
<tbody></tbody> 表格的身体
<tfoot></tfoot> 表格的尾部
<tr></tr> 表格的行
<th></th> 表格的标题
<td></td> 表格的单元格

【表格的四层嵌套】
table
......thead
............tr
..................th
......tbody
............tr
..................td
......tfoot

【表格的特性】
1.table标签特性:
(1).单元格平分整个table的宽度
(2).th内容默认加粗,且水平垂直居中
(3).td内容不加粗,只垂直居中
(4).table的宽度决定整个表格宽度,如果td,th设置总宽度比总宽度大,不起作用
(5).表格的同一列继承最大的宽度(解决方法:th,td最好都设置宽度)
(6).表格的同一行继承最大的宽度(解决方法:th,td最好都设置高度)

2.单元格的合并
(1).colspan="数值" 行合并
(2).rowspan="数值" 列合并
数值代表要合并的单元格数量,被合并的单元格需要注释掉

【样例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格基础</title>
    <style>
        table{
            border: 1px solid red;
            /*合并边框*/
            border-collapse:collapse;
        }
        th,td{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th colspan="2">周一二</th>
                <!-- <th>周二</th> -->
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td rowspan="2">体育</td>
                <td>政治</td> 
            </tr>
            <tr>
                <td>美术</td>
                <td>化学</td>
                <td>英语</td>
                <!-- <td>数学</td> -->
                <td>政治</td> 
            </tr>           
        </tbody>
    </table>
</body>
</html>

相关文章

  • 【HTML笔记】_表格基础one

    为了写页面硬着头皮上HTML,一切从0开始,但愿我能OK! 【表格构成】 表格 表格的头部 表格的身体...

  • 【HTML笔记】_HTML基础one

    为了写页面硬着头皮上HTML,一切从0开始,但愿我能OK! 【文本样式】 【常见标签】1.title标签 ... ...

  • 【HTML笔记】_CSS基础one

    为了写页面硬着头皮上HTML,一切从0开始,但愿我能OK! 【css语法】:属性名:属性值【css引入方式】1.行...

  • 【HTML笔记】_表单基础one

    为了写页面硬着头皮上HTML,一切从0开始,但愿我能OK! 【表单的样式】 【表单的类型】input type="...

  • 【HTML笔记】_JS基础one

    为了写页面硬着头皮上HTML,一切从0开始,但愿我能OK! 【前言】HTML是框架,CSS是样式,JS是行为,JS...

  • 2018-08-13day-21

    HTML web基础 添加文本 列表 图片和超链接 表格 复杂表格

  • HTML笔记-- 表格标签

    HTML笔记-- 表格标签 标签(空格分隔): HTML 表格标签(*******) 作用:可以对数据进行格式化操...

  • 初识HTML

    HTML基础 文本标签 列表 图片和超链接 表格 homework.html

  • HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML基础之表格

    明确目标 我们需要实现这样的表格 任务列表 1.设定表格边框和加上标题2.实现一个类似目标表格的表格3.合并表格以...

网友评论

      本文标题:【HTML笔记】_表格基础one

      本文链接:https://www.haomeiwen.com/subject/ybowsxtx.html