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

Si también deseas implementar el efecto de tabla comparativa de la página de inicio del tema LingHang en tu sitio, puedes hacerlo de la siguiente manera:

1. Agrega un bloque de columnas en el editor y selecciona ancho completo.

2. Agrega un bloque de espaciado para mantener espacio con el contenido superior.

3. Agrega un título.

4. Agrega un párrafo para la descripción.

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

<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 necesitas más, agrega otro párrafo.

7. Agrega código CSS personalizado, consulta el método en:Cómo agregar 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;
  }
}