在线css 表格制作

CSS 表格制作方法

使用 CSS 制作表格可以通过多种方式实现，以下是几种常见的方法：

使用 HTML 表格标签结合 CSS 样式

HTML 提供了 <table>、<tr>、<th> 和 <td> 等标签来创建表格，通过 CSS 可以美化这些表格。

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

使用 CSS Grid 布局

CSS Grid 是一种强大的布局工具，可以用来创建表格结构。

<div class="grid-table">
  <div class="header">Header 1</div>
  <div class="header">Header 2</div>
  <div class="cell">Data 1</div>
  <div class="cell">Data 2</div>
</div>

.grid-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: #ddd;
}

.header, .cell {
  background-color: white;
  padding: 8px;
}

.header {
  font-weight: bold;
  background-color: #f2f2f2;
}

使用 Flexbox 布局

Flexbox 也可以用来模拟表格布局。

<div class="flex-table">
  <div class="row">
    <div class="header">Header 1</div>
    <div class="header">Header 2</div>
  </div>
  <div class="row">
    <div class="cell">Data 1</div>
    <div class="cell">Data 2</div>
  </div>
</div>

.flex-table {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.row {
  display: flex;
}

.header, .cell {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
}

.header {
  font-weight: bold;
  background-color: #f2f2f2;
}

在线工具推荐

如果需要快速生成 CSS 表格，可以使用以下在线工具：

• CSS Table Generator：提供可视化界面生成表格代码。
• Div Table：将 <div> 元素转换为表格布局的工具。
• Bootstrap Table Generator：基于 Bootstrap 框架的表格生成工具。

这些工具通常允许自定义边框、颜色、间距等样式，并导出 HTML 和 CSS 代码。