HTML表格与列表详解-优快云博客

本文详细介绍了HTML中表格和列表的使用方法，包括普通表格、跨列、跨行、行分组等表格特性，以及有序列表和无序列表的嵌套使用，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格

1.普通表格

<table border="1px" cellspacing="0" width="30%">
    <tr>
        <td>四川</td>
        <td>黑龙江</td>
    </tr>
    <tr>
        <td>成都</td>
        <td>哈尔滨</td>
    </tr>
</table>

四川	黑龙江
成都	哈尔滨

2. 跨列

<table border=”1px” cellspacing=”0” width=”30%”>
    <tr>
        <td colspan=”2”>成都</td>
    </tr>
    <tr>
        <td>青羊区</td>
        <td>金牛区</td>
    </tr>
</table>

成都
青羊区	金牛区

3.跨行

<table border=”1px” cellspacing=”0” width=”30%”>
    <tr>
        <td rowspan=”2”>成都</td>
        <td>青羊区</td>
    </tr>
    <tr>
        <td>金牛区</td>
    </tr>
</table>

成都	青羊区
	金牛区

4.行分组

<table border=”1px” cellspacing=”0” width=”40”>
    <thead>
        <tr>
            <td>Number</td>
            <td>Name</td>
            <td>Money</td>
        </tr>
    </thead>
    <tbody style=”color:red;”>
        <tr>
            <td>1</td>
            <td>mouse</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>keybord</td>
            <td>200</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan=”2”>Total</td>
            <td>300</td>
        </tr>
    </tfoot>
</table>

Number	Name	Money
1	mouse	100
2	keybord	200
Total		300

嵌套列表

————-有序套无序————-

<ol>
    <li>
        四川省                                                 
        <ul>                                                    
            <li>成都市</li>                                            
            <li>眉山市</li>
        </ul>
    </li>
</ol>

四川省
- 成都市
- 眉山市

————-无序套有序————-

<ul>
    <li>
        四川省                                             
        <ol>                                                        
            <li>成都市</li>                                            
            <li>眉山市</li>                                            
        </ol>
    </li>
</ul>