How to Add a Table Like This Site's to the Homepage

If you also want to achieve the effect of our LingHang Theme homepage comparison table on your website, you can do it in the following way:

1. Add a Columns block in the Admin Dashboard, choose Full Width.

2. Add a Spacer block to create space from the content above.

3. Add a Heading.

4. Add a Paragraph block to write the description.

5. Create an HTML block and paste the following code, modifying the content as needed.

<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. If more content is needed below, add another paragraph to write text.

7. To add custom CSS code, refer to the method:How to Add Custom CSS Code in LingHang Theme – LingHang Theme

/* 对比表格样式 - 响应式堆叠布局 */
.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;
  }
}