2018-08-13 HTML5 学习表格

简单表格:

<!--表格-->
        <!--table属性
            border:表格中边框的宽度
            width:表格宽度
            height:表格宽度 
            align:让整个表在其父标签居中
            bgcolor 背景颜色
            cellspacing:单元格之间设置的距离
            cellpadding:单元格与内容的间距
            bordercolor:边界颜色
        -->
        <!--tr属性
            height:设置单独某一行的高度
            align:当前行所有单元格内容居中(center)还有left,right
            bgcolor 背景颜色
        -->
        <!--td属性
            width:设置某一列的宽度  
            align:center 当前列内容设置居中
            bgcolor 背景颜色
        -->
        
        <!--注意:所有属性的值用双引号括起来-->
        
        
        <table border="1" width="200" height="300" align="center"bgcolor="blanchedalmond" cellspacing="0" cellpadding="" bordercolor="red">
            <!--第一行第一列-->
            <tr height="50" align="center">
                <td>dsa</td>  <!--第一行第一列-->
                <td>dsa</td>
                <td>dsa</td>
            </tr>
            <tr>
                <td>dsa</td>  <!--第二行第一列-->
                <td>dsa</td>
                <td>dsa</td>
            </tr>
            
            
        </table>
简单表格

复杂表格:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>复杂表格</title>
    </head>
    <body>
        <!--
            rowspan:合并行
        -->
        <!--表格1-->
        <table border="1" width="300"  height="200">
            <tr>
                <td rowspan="2"></td>
                <td></td>
                <td></td>
            </tr>
            
            <tr>
                <td></td>
                <td></td>
            </tr>
            
        </table>
        
        <table border="1" width="400" height="300">
            <tr>
                <td rowspan="3"></td>
                <td></td>
                <td></td>
            </tr>
            
            <tr>
                <td rowspan="2"></td>
                <td></td>
            </tr>
            
            <tr>
                <td></td>
            </tr>
            
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            
            <tr>
                <td></td>
                <td colspan="2"></td>
            </tr>
            
        </table>

        
    </body>
</html>

复杂表格
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一,HTML语言的一般语法: 1,围堵标记:<>… 1)带属性的标记: … 2)无属性的标记:加粗 居中 标题 2...
    清水易蓝阅读 5,086评论 0 2
  • 细线表格 在表格标签中向通过指定外边距为0来实现细线表格是不靠谱的,其实它是将2条线合并为一条线,所以看上去很不舒...
    GodlinE阅读 2,701评论 0 0
  • 在后台管理系统、数据类产品等的设计中,表格作为一种常见的信息组织整理手段,甚至是web页面的基础设施之一,其重要性...
    停停走走UP阅读 10,975评论 3 46
  • 这个问题的缘起,是这样的:如何证明实数比自然数多? 这个问题没有它看上去那么简单。比如说,自然数和偶数是否一样多?...
    LostAbaddon阅读 5,796评论 7 6
  • 表格,又称为表,即是一种可视化交流模式,又是一种组织整理数据的手段。人们在通讯交流、科学研究以及数据分析活动当中广...
    青东海阅读 7,898评论 4 45

友情链接更多精彩内容