表格

作者: 洛洛kkkkkk | 来源:发表于2017-04-18 09:19 被阅读0次
  1. html5表格标签
  2. 表格
  3. 2019-01-09第三天
  4. 2015年11月5日
  5. 2018-11-28
  6. 第5单元 个性月历
  7. 零基础Web前端开发(5)
  8. html基础
  9. HTML基础
  10. 2-12. 表格标签中的其他标签
  11. <!doctype html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>表格</title>
            <style type="text/css">
                table{
                    border: 5px red solid;
                    width: 800px;
                    height: 580px;
                    /*合并表格边框*/
                    border-collapse:collapse; 
                    empty-cells: show;
                    /*hide 隐藏没有内容的单元格
                     
                    */
                    text-align: center;
                    /*文字竖直方向(文本属性会继承父级)
                        需要改变文字竖直居中的时候,不可以写在table里面。因为tbody默认是middle,td会默认继承tbody的样式。
                    */
                    /*vertical-align: ;*/
                }
                td{
                    vertical-align: top;
                    /*border: 1px red solid;*/
                }
            </style>
        </head>
        <body>
        <!-- 表格 -->
        <!-- border 可以给table添加边框,注意:和我们之前在CSS样式里面写的border不是一个东西,border写在标签里代表的是属性。 -->
        <!-- 表格的宽和高可以通过 width和height!属性!  来设置,也可以通过CSS样式width和height来设置,同时设置以css为准
        可以通过设置表格第一行里面的td或th来设置一列的宽度,总宽度超出整个表格的宽度之后按照比例分配。 
        可以给每个tr里面的第一个td(或th)设置高度来设置表格每行的高度,总高度超出表格高度之后,会把表格高度撑开。
        cellspacing 可以设置单元格之间的间距。(边框合并的情况下无效)
        border-collapse:collapse;  合并单元格边框。变成一条线
    
        -->
    
            <table border="1" width="500" height="300" cellspacing="10" cellpadding="50">
            <!-- 表格的名字 -->
                <caption>成绩</caption>
                <!-- 表头 -->
                <!-- <thead></thead> -->
                <!-- 身体,表格的内容 -->
                <!-- thead,tfoot 都不经常使用,可以省略, tbody当我们不写的时候,浏览器会自动给我们添加,所以也可以省略 -->
                <!-- <tbody> -->
                <!-- tr <table row> 代表的是一行,每行有几个单元格取决于td或者th(第一行的标题) -->
                    
                    <tr>
                        <th width="400" height="300" colspan="2">语文 数学</th>
                        <!-- <th width="300">数学</th> -->
                        <th width="500" rowspan="2">外语</th>
                    </tr>
                    <tr>
                        <td height="200">100</td>
                        <td rowspan="3">100</td>
                        <!-- <td>100</td> -->
                    </tr>
                    <tr>
                        <td height="200">90</td>
                        <!-- <td>90</td> -->
                        <td>90</td>
                    </tr>
                    <tr>
                        <td height="200">0</td>
                        <!-- <td>0</td> -->
                        <td>0</td>
                    </tr>
                <!-- </tbody> -->
                <!-- 表尾 -->
                <!-- <tfoot></tfoot> -->
            </table>
        </body>
    </html>
    

    相关文章

    表格 格式: 表格标签: ————定义表格 ———— 定义表格标题。 ———— 定义表格的表头。 ———— ...

  12. 表格

    基本表格 带边框表格 鼠标悬停表格 条纹状表格 紧缩型表格 ...

  13. 2019-01-09第三天

    表格 有表格线 没有表格线? 水平表格和垂直表格如何设计出来的?

  14. 2015年11月5日

    表格标签:table 表格thead 表格头tbody 表格主体tfoot 表格尾tr 表格行th 元素定义表头t...

  15. 2018-11-28

    表格 表格 长表格 表格的布局 完善clearfix 表单 模拟后台服务器 表格

  16. 第5单元 个性月历

    创建表格 输入表格 调整与修必表格 美化表格

  17. 零基础Web前端开发(5)

    HTML表格概述 表格的基本结构 表格的基本标签有标签 (表格), 标签(表格行), 标签(表格单元格)。 标签和...

  18. html基础

    HTML表格 定义表格的标签 定义表格若干行 定义表格的表头 定义表格的若干单元格 border 表格属性 合并...

  19. HTML基础

    HTML表格 定义表格的标签 定义表格若干行 定义表格的表头 定义表格的若干单元格 border 表格属性 合并...

  20. 2-12. 表格标签中的其他标签

    | | 定义表格 || | 定义表格标题。 || | 定义表格的表头。 || | 定义表格的行。 ...

  21. 网友评论

        本文标题:表格

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