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>