HTML中的表格及样式的设置

目录

1.表格如何生成

2.样式如何设置

---

1.表格如何生成

1.表格用标签<table></table>表示，<tr>是表格中的行，td是表格中的单元格，也可以称作列。

表头部分的单元格或者列不用<td>表示，而是用<th>来表示，会有居中加粗的效果，有时候方便设置样式，我们也会把表头和表格的主体内容分离，表头的部分用<thead></thead>标签包裹，而表格的主体部分则用<tbody></tbody>包裹,下面我来用代码展示一下如何制作表格，大家仔细看哈。

    <table >
<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>345</td>
        <td>123</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    
    <tr>
        <td>2</td>
        <td>盗墓笔记</td>
        <td>
            <img src="./images/down.jpg" alt="">
        </td>
        <td>124</td>
        <td>675432</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>

    <tr>
        <td>3</td>
        <td>西游记</td>
        <td>
            <img src="./images/up.jpg" alt="">
        </td>
        <td>212</td>
        <td>7654</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    
    <tr>
        <td> 4</td>
        <td>东游记</td>
        <td>
            <img src="./images/up.jpg" alt="">
        </td>
        <td>23</td>
        <td>75645</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr>
        <td>5</td>
        <td>甄嬛传</td>
        <td>
            <img src="./images/down.jpg" alt="">
        </td>
        <td>121</td>
        <td>7676</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
</tbody>
    </table>

这样我们就生成了一个表格

2.样式如何设置

2.1 给整个表格添加细线边框，只需要在<table>开始标签里添加一个border="1",就好了，

 

 设置完边框是这样，大家会发现边框与边框之间会有间距，这个是表格边框的默认样式，要去除只需要这行代码就可以了

table{
    border-collapse: collapse;
}

其它的就比较简单了，我们可以给整个表格设置宽高,行高，还可以给单元格设置宽高，实现我们想要的效果。

今天的分享就到这里了，下次分享的内容是表格中单元格的合并。