lima-city: Webhosting, Domains und Cloud
0 Pluspunkte 0 Minuspunkte
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?
von  

2 Antworten

0 Pluspunkte 0 Minuspunkte

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;
}
von (492 Punkte)  
0 Pluspunkte 0 Minuspunkte

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>
von (397 Punkte)  
Diese Community basiert auf dem Prinzip der Selbstregulierung. Beiträge werden von Nutzern erstellt, bewertet und verbessert – ganz ohne zentrale Moderation.

Wer hilfreiche Fragen stellt oder gute Antworten gibt, sammelt Punkte. Mit steigender Punktzahl erhalten Mitglieder automatisch mehr Rechte, zum Beispiel

  • Kommentare verfassen
  • Fragen und Antworten bewerten
  • Themen von Fragen bearbeiten
  • Fragen, Antworten und Kommentare bearbeiten
  • Inhalte ausblenden

So entsteht eine Plattform, auf der sich Qualität durchsetzt – getragen von einer engagierten Gemeinschaft.

2.3k Fragen

2.8k Antworten

261 Kommentare

13 Nutzer