Cómo agregar una tabla como la de este sitio a la página de inicio

Si también desea lograr el efecto de la tabla comparativa en la página de inicio de nuestro Tema LingHang en su sitio web, puede hacerlo de la siguiente manera:

1. En el Admin Dashboard, añade un bloque de sección y selecciona ancho completo.

2. Añade un bloque de espaciador para mantener un espacio con el contenido superior.

3. Añade un bloque de título.

4. Añade un bloque de párrafo para escribir la descripción.

5. Crea un bloque HTML y pega el siguiente código, modifica el contenido según tus necesidades.

<div class="comparison-table">
  <table>
    <thead>
      <tr class="table-header">
        <th>痛点</th>
        <th>❌ 定制开发</th>
        <th>❌ Elementor等构建器</th>
        <th>✅ 领航主题</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="pain-point">价格</td>
        <td data-label="定制开发">万为单位起步每次修改额外收费</td>
        <td data-label="Elementor等构建器">主题$60+插件$89/年需懂英文会配置</td>
        <td class="advantage" data-label="领航主题">
          体验价¥398一次付费终身使用无额外费用
        </td>
      </tr>
      <tr>
        <td class="pain-point">速度</td>
        <td data-label="定制开发">取决于开发商水平维护困难</td>
        <td data-label="Elementor等构建器">臃肿代码2-3秒加载影响SEO排名</td>
        <td class="advantage" data-label="领航主题">
          原生代码0.8秒加载GTmetrix评分A级
        </td>
      </tr>
      <tr>
        <td class="pain-point">上手</td>
        <td data-label="定制开发">完全依赖开发商自己无法修改</td>
        <td data-label="Elementor等构建器">学习周期2-4周复杂拖拽逻辑</td>
        <td class="advantage" data-label="领航主题">
          3分钟上手像填表格一样简单
        </td>
      </tr>
      <tr>
        <td class="pain-point">售后</td>
        <td data-label="定制开发">合同期后找不到人换开发商成本高</td>
        <td data-label="Elementor等构建器">英文论坛无人理靠自己摸索</td>
        <td class="advantage" data-label="领航主题">
          微信1对1支持中文沟通无障碍
        </td>
      </tr>
    </tbody>
  </table>
</div>

6. Si se necesita más abajo, añade otro párrafo para escribir texto.

7. Añade código CSS personalizado, método consulta en:Cómo añadir código CSS personalizado en el Tema LingHang – Tema LingHang

/* 对比表格样式 - 响应式堆叠布局 */
.comparison-table {
  margin: var(--spacing-lg) auto;
  max-width: var(--container-max-width);
  padding: 0 var(--container-padding);
  margin-bottom: var(--spacing-lg);
}

.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: var(--shadow-md);
  border-radius: 0;
  overflow: hidden;
  border: none;
  table-layout: fixed;
}

/* 表头样式 */
.table-header {
  background-color: var(--secondary-color);
  color: white;
}

.table-header th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 列宽设置 */
.table-header th:nth-child(1),
.pain-point {
  width: 15%;
  min-width: 100px;
}

.table-header th:nth-child(2),
.table-header th:nth-child(3),
.table-header th:nth-child(4) {
  width: 28.33%;
}

/* 表格内容样式 */
.comparison-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-color);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

/* 痛点列样式 */
.pain-point {
  background-color: var(--background-light);
  font-weight: 600;
  border-right: 1px solid var(--border-color);
  color: var(--secondary-color);
}

/* 优势列样式 */
.advantage {
  background-color: rgba(0, 154, 0, 0.05);
  color: var(--accent-color);
  font-weight: 500;
  position: relative;
  padding-left: 2.5rem;
}

/* 对勾图标样式 */
.advantage::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-color);
  font-weight: 600;
  font-size: 16px;
}

/* 行悬停效果 */
.comparison-table tbody tr {
  transition: var(--transition-base);
}

.comparison-table tbody tr:hover {
  background-color: rgba(253, 95, 23, 0.03);
}

/* 移动端堆叠布局 */
@media (max-width: 768px) {
	td.pain-point {
    color: #fff;
}
	
  .comparison-table {
    margin: var(--spacing-md) auto;
    padding: 0 15px;
  }
  
  .comparison-table table {
    display: block;
    min-width: auto;
    box-shadow: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
  }
  
  .comparison-table thead {
    display: none;
  }
  
  .comparison-table tbody,
  .comparison-table tr,
  .comparison-table td {
    display: block;
    width: 100% !important;
    border: none;
  }
  
  .comparison-table tr {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-color);
    background: var(--background);
  }
  
  .comparison-table tr:last-child {
    border-bottom: none;
  }
  
  .pain-point {
    background: var(--secondary-color);
    color: white;
    font-weight: 600;
    padding: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border-right: none;
    width: 100%;
  }
  
  .comparison-table td:not(.pain-point) {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color-light);
    display: flex;
    align-items: flex-start;
  }
  
  .comparison-table td:not(.pain-point)::before {
    content: attr(data-label);
    font-weight: 600;
    min-width: 100px;
    margin-right: 1rem;
    color: var(--text-muted);
    font-size: 0.9em;
    flex-shrink: 0;
  }
  
  .advantage {
    background-color: rgba(0, 154, 0, 0.08);
    color: var(--accent-color);
    padding-left: 1rem;
  }
  
  .advantage::before {
    content: "✓";
    position: static;
    transform: none;
    margin-right: 0.5rem;
    font-size: 14px;
  }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
  .comparison-table {
    padding: 0 10px;
  }
  
  .comparison-table td:not(.pain-point)::before {
    min-width: 80px;
    font-size: 0.8em;
  }
  
  .comparison-table td:not(.pain-point) {
    padding: 0.6rem 0.8rem;
    font-size: 14px;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .comparison-table td:not(.pain-point)::before {
    margin-right: 0;
    margin-bottom: 0.5rem;
    min-width: auto;
  }
  
  .pain-point {
    padding: 0.8rem;
    font-size: 14px;
  }
}