HTML的表格和样式的设置

目录

1.表格如何生成

2.样式如何设置

1.表格如何生成

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

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

1.  
   <table >
2.  
   <thead>
3.  
   <tr>
4.  
   <th>排名</th>
5.  
   <th>关键词</th>
6.  
   <th>趋势</th>
7.  
   <th>今日搜索</th>
8.  
   <th>最近七日</th>
9.  
   <th>相关链接</th>
10.  
    </tr>
11.  
    </thead>
12.  
     
13.  
    <tbody>
14.  
    <tr >
15.  
    <td>1</td>
16.  
    <td>鬼吹灯</td>
17.  
    <td><img src="./images/down.jpg" alt=""></td>
18.  
    <td>345</td>
19.  
    <td>123</td>
20.  
    <td>
21.  
    <a href="#">贴吧</a>
22.  
    <a href="#">图片</a>
23.  
    <a href="#">百科</a>
24.  
    </td>
25.  
    </tr>
26.  
     
27.  
    <tr>
28.  
    <td>2</td>
29.  
    <td>盗墓笔记</td>
30.  
    <td>
31.  
    <img src="./images/down.jpg" alt="">
32.  
    </td>
33.  
    <td>124</td>
34.  
    <td>675432</td>
35.  
    <td>
36.  
    <a href="#">贴吧</a>
37.  
    <a href="#">图片</a>
38.  
    <a href="#">百科</a>
39.  
    </td>
40.  
    </tr>
41.  
     
42.  
    <tr>
43.  
    <td>3</td>
44.  
    <td>西游记</td>
45.  
    <td>
46.  
    <img src="./images/up.jpg" alt="">
47.  
    </td>
48.  
    <td>212</td>
49.  
    <td>7654</td>
50.  
    <td>
51.  
    <a href="#">贴吧</a>
52.  
    <a href="#">图片</a>
53.  
    <a href="#">百科</a>
54.  
    </td>
55.  
    </tr>
56.  
     
57.  
    <tr>
58.  
    <td> 4</td>
59.  
    <td>东游记</td>
60.  
    <td>
61.  
    <img src="./images/up.jpg" alt="">
62.  
    </td>
63.  
    <td>23</td>
64.  
    <td>75645</td>
65.  
    <td>
66.  
    <a href="#">贴吧</a>
67.  
    <a href="#">图片</a>
68.  
    <a href="#">百科</a>
69.  
    </td>
70.  
    </tr>
71.  
    <tr>
72.  
    <td>5</td>
73.  
    <td>甄嬛传</td>
74.  
    <td>
75.  
    <img src="./images/down.jpg" alt="">
76.  
    </td>
77.  
    <td>121</td>
78.  
    <td>7676</td>
79.  
    <td>
80.  
    <a href="#">贴吧</a>
81.  
    <a href="#">图片</a>
82.  
    <a href="#">百科</a>
83.  
    </td>
84.  
    </tr>
85.  
    </tbody>
86.  
    </table>

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

2.样式如何设置

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

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

1.  
   table{
2.  
   border-collapse: collapse;
3.  
   }

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

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

这篇好文章是转载于：编程之路