Tabelle by @ands419 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

formmethodDefinisce il metodo di invio dei dati oltre a method
<body>Tag primario di un documento HTML
<i>Formatta il testo in corsivo/italico non enfatizzato
idIdentifica univocamente un elemento HTML
<h4>Titolo di intestazione di quarto livello
relServe a definire la relazione tra il documento e una risorsa.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Cheeseburger div

Gesù nostro signore(2)

Modulo multi Processo

esercitazione 1

media ponderata voti pesi

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html>
<head>
<title>Tabelle</title>
<style>
body {
  font-family: sans-serif;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.table-container {
  border: 1px solid black;
  margin: 10px;
  width: 150px; /* Larghezza di base, può variare a seconda della tabella */
  position: relative; /* Per il posizionamento delle etichette percentuali */
}

.cell {
  border: 1px solid black;
  width: 33%; /* Larghezza di base delle celle */
  height: 50px; /* Altezza di base delle celle */
  float: left;
  box-sizing: border-box; /* Include padding e border nella larghezza */
  text-align: center;
}

.cell-50 {
  width: 50%;
}

.cell-100 {
  width: 100%;
}

.label {
  position: absolute;
  bottom: -15px; /* Posizionamento sotto la tabella */
  left: 50%;
  transform: translateX(-50%);
}

.label-vertical {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -15px;
}

/* Colori delle celle */
.cell-green { background-color: green; }
.cell-blue { background-color: blue; }
.cell-red { background-color: red; }

</style>
</head>
<body>

<h1>Tabelle</h1>

<div class="container">

  <div class="table-container" style="width: 150px; height: 100px;">
    <div class="cell cell-green cell-33">A</div>
    <div class="cell cell-33">B</div>
    <div class="cell cell-33">
      <div class="cell cell-100">C</div>
      <div class="cell cell-blue cell-100">D</div>
    </div>
    <div class="label">33%</div>
    <div class="label">33%</div>
    <div class="label">33%</div>
  </div>

  <div class="table-container" style="width: 99px; height: 100px;">
    <div class="cell cell-green cell-33">A</div>
    <div class="cell cell-33">B</div>
    <div class="cell cell-red cell-33">C</div>
    <div class="cell cell-blue cell-33">D</div>
    <div class="label">33%</div>
    <div class="label">33%</div>
    <div class="label">33%</div>
    <div class="label-vertical">50%</div>
    <div class="label-vertical">50%</div>
  </div>

  <div class="table-container" style="width: 150px; height: 100px;">
    <div class="cell cell-green cell-50">
      <div class="cell cell-100">A</div>
      <div class="cell cell-100">F</div>
    </div>
    <div class="cell cell-50">
      <div class="cell cell-50">B</div>
      <div class="cell cell-red cell-50">C</div>
      <div class="cell cell-blue cell-50">D</div>
      <div class="cell cell-50">E</div>
      <div class="cell cell-50">G</div>
    </div>
    <div class="label">50%</div>
    <div class="label">50%</div>
  </div>

  <div class="table-container" style="width: 99px; height: 100px;">
    <div class="cell cell-green cell-100">A</div>
    <div class="cell cell-33">B</div>
    <div class="cell cell-33">C</div>
    <div class="cell cell-blue cell-33">D</div>
    <div class="cell cell-33">E</div>
    <div class="label">33%</div>
    <div class="label">33%</div>
    <div class="label">33%</div>
  </div>

</div>

</body>
</html>