Preistabelle in HTML

Question

Ein Produkt gibt es in Small, Medium und Large. Jedes Paket hat spezielle Eigenschaften und Preise. Wie kann ich am besten eine Tabelle dazu machen wo auch das Medium Paket hervorgehoben wird?

Answer 1

Zuerst erstellst du das HTML Markup für die Tabelle.

<table>
  <tr>
    <th>Small</th>
    <th class="highlight">
      <div class="recommendation-label">Empfohlen</div><br>Medium
    </th>
    <th>Large</th>
  </tr>
  <tr>
    <td>€9,99/Monat</td>
    <td class="highlight">€19,99/Monat</td>
    <td>€29,99/Monat</td>
  </tr>
  <tr>
    <td>10 GB</td>
    <td class="highlight">100 GB</td>
    <td>1 TB</td>
  </tr>
  <tr>
    <td>E-Mail</td>
    <td class="highlight">Telefon & E-Mail</td>
    <td>24/7 Premium Support</td>
  </tr>
</table>

Mit CSS kannst du die Tabelle nach deinen Bedürfnissen anpassen. JSFiddle Demo

table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	font-family: Arial, sans-serif;
}

th,
td {
	border: 1px solid #ccc;
	padding: 15px;
}

th {
	background-color: #f4f4f4;
}

.highlight {
	background-color: #e0f7fa;
	border: 2px solid #00acc1;
	font-weight: bold;
}

.recommendation-label {
	display: inline-block;
	background-color: #00acc1;
	color: white;
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 0.85em;
	margin-bottom: 8px;
}

Answer 2

Hier ist ein Beispiel mit dezenten Animationen.

<style>
body {
	font-family: Arial, sans-serif;
	background: #f9f9f9;
	padding: 20px;
}

.package-wrapper {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.package {
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 20px;
	width: 250px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	text-align: center;
	transition: transform 0.2s ease;
}

.package:hover {
	transform: translateY(-5px);
}

.highlight {
	border: 2px solid orange;
	background-color: #FFD580;
	position: relative;
}

.highlight::before {
	content: "Bestseller";
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background-color: orange;
	color: white;
	padding: 4px 10px;
	border-radius: 10px;
	font-size: 1.2em;
	font-weight: bold;
}

.package h3 {
	margin-top: 0;
}

.price {
	font-size: 1.4em;
	margin: 10px 0;
	color: #333;
}

.features {
	list-style: none;
	padding: 0;
}

.features li {
	margin: 8px 0;
}
</style>

<div class="package-wrapper">
  <div class="package">
    <h3>Small</h3>
    <div class="price">€ 9,90 /Monat</div>
    <ul class="features">
      <li>20 GB SSD</li>
      <li>2 GB RAM</li>
      <li>Community Support</li>
    </ul>
  </div>

  <div class="package highlight">
    <h3>Medium</h3>
    <div class="price">€ 39,99 /Monat</div>
    <ul class="features">
      <li>100 GB SSD</li>
      <li>8GB RAM</li>
      <li>Standard Support</li>
    </ul>
  </div>

  <div class="package">
    <h3>Large</h3>
    <div class="price">€ 79,90 /Monat</div>
    <ul class="features">
      <li>1 TB SSD</li>
      <li>32 GB RAM</li>
      <li>24/7 Premium Support</li>
    </ul>
  </div>
</div>