zoukankan      html  css  js  c++  java
  • Html中的表格

    表格由<table>标签来定义。每个表格均有若干行(由<tr> 标签定义),每行被分割为若干单元格(由<td>标签定义)。

    字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    HTML 表格的组成

    table:包含表格,表格的开始。

    tr:表格的行

    th:表格的开头

    td:表格的数据

    属性:

    cellpadding:表示内容与表格之间的间隙。

    cellspacing:单元格之间和单元格与边框的的间隙。

    border:设置边框,颜色,边框线,大小等

    align:设置内容对齐方式

    td跨行跨列通过 rowspan 和colspan来实现

    案例 如下图:

         

      代码中可以看出相关的属性设置

     

    <table cellpadding="15" cellspacing="11px" border="1" width="600px" align="center">
                <caption><h3>表名称</h2></caption>
                <tr>
                    <th align="left">字段名</th><th>字段名</th><th>字段名</th>
                </tr>
                <tr bgcolor="#008000">
                    <td align="center">数据</td><td>数据</td><td>数据2</td>
                </tr>
                
                <tr>
                    <td height="88">数据</td><td>数据</td><td>数据</td>
                </tr>
                <tr>
                    <td>数据</td><td colspan="2">数据</td>
                </tr>
                <tr>
                    <td>数据s</td><td rowspan="2" valign="bottom">数据</td><td>数据</td>
                </tr>
                <tr>
                    <td>数据</td><td>数据</td>
                </tr>
                <tr>
                    <td >数据</td>
                    <td>
                        <table width="100%" height="100%" border="1"   >
                            <tr>
                                <th>字段名</th><th>字段名</th><th>字段名</th>
                            </tr>
                            <tr bgcolor="#008000">
                                <td>数据</th><td>数据</td><td>数据2</td>
                            </tr>
                        </table>
                    </td>
                    <td>数据</td>
                </tr>
            </table>
  • 相关阅读:
    C语言第九节 函数指针
    C语言第七节 指针
    C语言第五节 函数
    C语言第六节 结构体
    C语言第四节 数组
    C语言第三节 循环结构
    C语言第二节 分支结构
    ARC、MRC混编
    Git 和 SVN之间的五个基本区别
    KZ--NSString、NSMutableString
  • 原文地址:https://www.cnblogs.com/zhangqie/p/7125475.html
Copyright © 2011-2022 走看看