CSS table属性设置及代码示例

ゝ一世哀愁。 2024-05-28 10:12 75阅读 0赞

![在这里插入图片描述][b365e4de32484d3883f4020ecb3f7e1f.png_pic_center]

[查看本专栏目录][Link 1]

<table> 
 <thead> 
  <tr> 
   <th>No.</th> 
   <th align="left">内容链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td align="left">Openlayers <a href="https://dajianshi.blog.csdn.net/article/details/136641287" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126706466" rel="nofollow"> 【源代码+示例300+】 </a></td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td align="left">Leaflet <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow"> 【源代码+图文示例 150+】 </a></td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td align="left">Cesium <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow"> 【源代码+图文示例200+】 </a></td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td align="left">MapboxGL<a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow"> 【源代码+图文示例150+】 </a></td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td align="left">前端就业宝典 <a href="https://blog.csdn.net/cuclife/category_12437862.html" rel="nofollow">【面试题+详细答案 1000+】</a></td> 
  </tr> 
 </tbody> 
</table>

#### 文章目录 ####

*   *   *  一、基本属性
         *  二、表格单元格相关属性
         *  三、表头相关属性
         *  四、注意事项

--------------------

CSS中用于控制表格(`table`)的样式属性众多，它们帮助开发者调整表格的外观与布局。下面是一些关键的CSS属性及其示例代码和注意事项：

#### 一、基本属性 ####

1.  **`border`**: 控制表格边框的样式、宽度和颜色。
    
     *  示例：
        
            table {
                    
              border: 1px solid #000; /* 设置边框为1px宽的实线黑色 */
            }
2.  **`border-collapse`**: 决定表格边框是否合并。
    
     *  可选值：`collapse`（合并边框）, `separate`（保持独立）
     *  示例：
        
            table {
                    
              border-collapse: collapse;
            }
3.  **`width`**: 设置表格的宽度。
    
     *  示例：
        
            table {
                    
              width: 100%;
            }
4.  **`height`**: 设置表格的高度。
    
     *  示例：
        
            table {
                    
              height: 300px;
            }

#### 二、表格单元格相关属性 ####

1.  **`background-color`**: 设置单元格背景色。
    
     *  示例：
        
            td, th {
                    
              background-color: #f2f2f2;
            }
2.  **`padding`**: 设置单元格内容与其边框之间的空间。
    
     *  示例：
        
            td, th {
                    
              padding: 10px;
            }
3.  **`text-align`**: 控制单元格中文本的水平对齐方式。
    
     *  示例：
        
            th {
                    
              text-align: left;
            }
4.  **`vertical-align`**: 控制单元格中文本的垂直对齐方式。
    
     *  示例：
        
            td {
                    
              vertical-align: middle;
            }

#### 三、表头相关属性 ####

*  **`th`**: 通常用于定义表头单元格的样式，比如字体加粗、居中等。

#### 四、注意事项 ####

1.  **浏览器兼容性**：虽然大部分CSS表格属性在现代浏览器中表现良好，但一些高级特性或特定样式可能在老版本浏览器中不被支持。
2.  **性能**：大量复杂的表格样式可能影响页面加载速度，特别是当使用了大量渐变、阴影等效果时。
3.  **语义化**：确保使用正确的HTML标签（如`<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`），这不仅有助于SEO，也使得CSS选择器更具有语义性。
4.  **响应式设计**：在移动设备上，表格可能难以阅读，考虑使用CSS媒体查询或框架（如Bootstrap的响应式表格）来优化显示。
5.  **避免使用内联样式**：尽量在外部CSS文件中定义样式，以便于维护和提高代码的可读性。

以上只是CSS表格样式的一部分，实际应用中还可以结合其他CSS属性，如`font-family`, `color`, `text-decoration`, `border-radius`（在某些情况下给单元格加圆角）等，来进一步美化和定制表格。

[b365e4de32484d3883f4020ecb3f7e1f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/f0674e29c82449a1b398200389f9d58a.png
[Link 1]: https://dajianshi.blog.csdn.net/article/details/134372791