当前位置：首页 > CSS

在线css表格制作

2026-03-12 11:50:25CSS

在线CSS表格制作工具

以下是一些可用于在线制作CSS表格的工具和平台，无需下载软件即可直接使用：

CSS Table Generator
网址：https://css-tricks.com/examples/CssTableGrid/
功能：提供可视化界面调整表格边框、颜色、间距等属性，实时生成CSS代码。

DivTable
网址：https://divtable.com/
特点：通过拖拽方式设计响应式表格，支持导出HTML和CSS代码，适合非开发者快速创建。

Tables Generator
网址：https://www.tablesgenerator.com/html_tables
优势：支持从Excel/Google Sheets粘贴数据生成表格，可自定义CSS样式并导出完整代码。

手动编写CSS表格代码示例

如需手动编写，以下是基础CSS表格代码模板：

<style>
  /* 基础表格样式 */
  .custom-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: Arial;
  }

  /* 表头样式 */
  .custom-table th {
    background-color: #4CAF50;
    color: white;
    padding: 12px;
    text-align: left;
  }

  /* 单元格样式 */
  .custom-table td, .custom-table th {
    border: 1px solid #ddd;
    padding: 8px;
  }

  /* 隔行变色效果 */
  .custom-table tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  /* 悬停效果 */
  .custom-table tr:hover {
    background-color: #e9e9e9;
  }
</style>

<table class="custom-table">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1 Data</td>
    <td>Row 1 Data</td>
  </tr>
</table>

响应式表格实现方法

针对移动设备适配的响应式表格方案：

在线css表格制作

@media screen and (max-width: 600px) {
  .responsive-table {
    display: block;
  }
  .responsive-table thead {
    display: none;
  }
  .responsive-table tr {
    margin-bottom: 10px;
    display: block;
    border: 1px solid #ddd;
  }
  .responsive-table td {
    display: block;
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  .responsive-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: bold;
  }
}