HTML学习-day2 表格

1.表格基本标签

<table>表格      <th>表头      <tr>表行      <td>单元格      <caption>标题

表格默认没有边框，设置边框需添加属性border

<table border="1">
        <caption>
            <h3>小说排行榜</h3>
        </caption>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/down.jpg" alt=""></td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>长安十二时辰</td>
            <td><img src="images/up.jpg" alt=""></td>
            <td>324</td>
            <td>3240</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
</table>

 

 2.表格基本设置

 双线边框合并成单线——<table style="border-collapse:collapse;>

 合并单元格——<td rowspan="xx">     <td colspan="xx">

语义化划分结构，便于CSS更改样式——<thead> <tbody> <tfoot>

<table border="1">
        <caption>
            <h3>小说排行榜</h3>
        </caption>

        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="images/down.jpg" alt=""></td>
                <td>356</td>
                <td>3560</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td colspan="5">更多详情</td>
            </tr>
        </tfoot>
</table>