如何创建带侧边列的表格？前端零基础技术求助

Hey there! No worries at all—let’s break this down super simply for you, since you’re working with copy-paste and backend-filled data. Here’s a straightforward approach to get that sidebar-style table up and running:

Step 1: Basic HTML Structure (Copy This First) #

This sets up a table with a distinct sidebar column (for your type values) and main columns for key and value. The {{...}} bits are placeholders your backend will replace with real data later.

<table class="sidebar-table">
  <thead>
    <tr>
      <!-- Sidebar column header -->
      <th>Type</th>
      <th>Key</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <!-- Repeat this row for every entry from your backend -->
    <tr>
      <td class="sidebar-cell">{{type_from_backend}}</td>
      <td>{{key_from_backend}}</td>
      <td>{{value_from_backend}}</td>
    </tr>
    <!-- Add more rows as your backend provides data -->
  </tbody>
</table>

Step 2: Simple CSS to Make It Look Like a Sidebar Table #

Paste this CSS to style the sidebar column so it stands out—you can tweak colors or widths easily if you want:

/* Style the whole table */
.sidebar-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

/* Style table headers */
.sidebar-table th {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: left;
  border-bottom: 2px solid #ddd;
}

/* Style all table cells */
.sidebar-table td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

/* Make the sidebar column distinct */
.sidebar-cell {
  background-color: #f8f8f8;
  font-weight: bold;
  width: 150px; /* Fixed width for the sidebar */
}

Step 3: Connect to Your Backend #

You just need to swap the {{...}} placeholders with the syntax your backend uses. For example:

• If your backend uses Jinja2 (Python), it might be {{ item.type }} instead of {{type_from_backend}}
• If it’s PHP, it would be <?php echo $item['type']; ?>
• Your backend team can give you the exact code to use here—keep the table structure the same!

Quick Copy-Paste Tips #

• Paste the HTML wherever you want the table to show up on your page
• Paste the CSS inside a <style> tag in your HTML’s <head> section, or into an existing .css file if you have one
• Test with one row first to make sure the backend data loads correctly, then add more rows as needed

You don’t need to understand every line—just copy, replace the placeholders, and adjust the CSS colors/sizes if you want to match your site’s look!

内容的提问来源于stack exchange，提问作者JinLing