• 表格


    1.基础的表单结构:<table><tr><td> </td></tr></table>,其中用<table>元素来创建表格。<tr>用来表示每一行的开始,<tr>之后是一个或多个<td>元素代表单元格

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
    </head>
    <body>
    <! - -表格的内容逐行进行编写的,tr代表行的开始,td代表一个单元格- ->
            <table>
                <tr>
                    <td>15</td>
                    <td>15</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>45</td>
                    <td>60</td>
                    <td>45</td>
                </tr>
                <tr>
                    <td>60</td>
                    <td>90</td>
                    <td>90</td>
                </tr>
            </table>
    </body>
    </html>
    

      2.表格的标题:<th>和<td>元素的用法一样,但它的作用是表示列或行的标题。即使一个单元格中没有任何内容,你也需要使用<td>或<th>元素来表示一个空单元格的存在,否则           其中的内容无法正确呈现。

    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格的标题</title>
    </head>
    <body>
    <table>
        <tr>
            <th></th>
            <th scope="col">Saturday</th>
            <th scope="col">Sunday</th>
        </tr>
        <tr>
            <th scope="row">Ticket sold:</th>
            <td>120</td>
            <td>135</td>
        </tr>
        <tr>
            <th scope="row">Total sales:</th>
            <td>$600</td>
            <td>$675</td>
        </tr>
    </table>
    </body>
    </html>
    

      其中,可在<th>元素上使用score特性来表明此元素是列标题还是行标题。score特性可以取以下值:row指明这是一个标题,col 指明这是一个列标题且经常;以粗体显示内容。




    3.跨行
    我们可在<th>或<td>元素中使用colspan特性来表明单元格所要跨越的列数。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>跨列</title>
    </head>
    <body>
    <tr>
        <th></th>
    <table>
            <th>9am</th>
            <th>10am</th>
            <th>11am</th>
            <th>12am</th>
        </tr>
        <tr>
            <th>Monday</th>
            <td colspan="2">Geography</td>
            <td>Math</td>
            <td>Art</td>
        </tr>
        <tr>
            <th>Tuesday</th>
            <td colspan="3">Gym</td>
            <td>Home Ec</td>
        </tr>
    </table>
    </body>
    </html>
    

      

    4.我们可在<th>或<td>元素中用rowspan特性来表明单元格所要跨越的行数。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>跨行</title>
    </head>
    <body>
    <table>
        <tr>
            <th></th>
            <th>ABC</th>
            <th>BBC</th>
            <th>CNN</th>
        </tr>
        <tr>
            <th>6pm - 7pm</th>
            <td rowspan="2">Movie</td>
            <td>Comedy</td>
            <td>News</td>
        </tr>
        <tr>
            <th>7pm - 8pm</th>
            <td>Sport</td>
            <td>Current Affairs</td>
        </tr>
    </table>
    </body>
    </html>
    

      

    5.长表格

    结构:<thead><tbody><tfoot> </thead></tbody></tfoot>
    <thead>:表格的标题应放在<thead>元素中。
    <tbody>:表格的主体部分应放在<tbody>元素中。
    <tfoot>:标题的脚脚注应放在<tfood>元素中。




    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>长表格</title>
    </head>
    <body>
    <table>
        <thead>
        <tr>
            <th>Date</th>
            <th>Income</th>
            <th>Expenditure</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>1st January</th>
            <td>250</td>
            <td>36</td>
        </tr>
        <tr>
            <th>2nd January</th>
            <td>285</td>
            <td>48</td>
        </tr>
        <tr>
            <th>31st January</th>
            <td>129</td>
            <td>64</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td></td>
            <td>7824</td>
            <td>1241</td>
        </tr>
        </tfoot>
    </table>
    </body>
    </html>
    

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
    </head>
    <body>
    <table>
        <thead>
        <tr>
            <th></th>
            <th scope="col">Home starter hosting</th>
            <th scope="col">Premium business hosting</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">Disk space</th>
            <td>250mb</td>
            <td>1gb</td>
        </tr>
        <tr>
            <th scope="row">Bandwidth</th>
            <td>5gb per month</td>
            <td>50gb per month</td>
        </tr>
        <tr>
            <th scope="row">Email accounts</th>
            <td>3</td>
            <td>10</td>
        </tr>
        <tr>
            <th scope="row">Server</th>
            <td>Shared</td>
            <td>VPS</td>
        </tr>
        <tr>
            <th scope="row">Support</th>
            <td>Email</td>
            <td>Telephone and email</td>
        </tr>
        <tr>
            <th scope="row">Setup</th>
            <td>Free</td>
            <td>Free</td>
        </tr>
        <tr>
            <th scope="row">FTP accounts</th>
            <td>1</td>
            <td>5</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td></td>
            <td colspan="2">Sign up now and save 10%!</td>
        </tr>
        </tfoot>
    </table>
    </body>
    </html>
    

      





  • 相关阅读:
    proxool配置及测试(数据库用的MySQL)
    Spring MVC
    修改类不重启tomcat 自动加载项目
    【ssm】拦截器的原理及实现
    springmvc实现json交互 -requestBody和responseBody
    Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC 配置校验器
    spring-dao.xml配置问题(一)
    tomcat自动缓存的几种解决方式
    editor does not contain a main type的解决方案
    实现PageProcessor
  • 原文地址:https://www.cnblogs.com/qq3069418554/p/9003391.html
Copyright © 2020-2023  润新知