DOMANDA Allineare lista e tabella in HTML

EdwardTheGamer

Bestemmiatore abusivo
Utente Èlite
2,688
1,383
CPU
AMD FX 6300
Scheda Madre
ASRock 960GM-VGS3 FX
HDD
Crucial MX500 + Hitachi Ultrastar + Toshiba P300
RAM
2x4GB DDR3 1600Mhz
GPU
AMD Sapphire RX 580 8GB
Monitor
1080p@60hz
PSU
Sharkoon Silentstorm Icewind 550W
OS
Winzozz 10
Salve,
potreste spiegarmi come allineare orizzontalmente la lista e la tabella nel codice HTML sottostante?
HTML:
<!doctype html>
<html lang="it">
<head>
<title>Prova</title>
</head>
<p>Lista</p>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<table>
<caption>
<p>Tabella</p>
</caption>
<thead>
<tr><th>A</th><th>B</th>
</thead>
<tbody>
<tr><td>1</td><td>2</td>
<tr><td>2</td><td>4</td>
<tr><td>3</td><td>6</td>
<tr><td>4</td><td>8</td>
</tbody>
</table>
</html>
Avete qualche altro suggerimento?
 
Ultima modifica da un moderatore:

Edmund Blackadder

Utente Attivo
293
141
Nel senso che vuoi la tabella e la lista l'una accanto all'altra? Se è così io userei il CSS:
HTML:
<!DOCTYPE html>
<html lang="it">

<head>
    <title>Prova</title>
    <style>
        #contenitore div {
            float: left;
            margin-left: 32px;
        }
    </style>
</head>
<body>
    <div id="contenitore">
        <div>
        <p>Lista</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        </div>
            <div>
            <table>
                <caption>
                    <p>Tabella</p>
                </caption>
                <thead>
                    <tr>
                        <th>A</th>
                        <th>B</th>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                    <tr>
                        <td>3</td>
                        <td>6</td>
                    <tr>
                        <td>4</td>
                        <td>8</td>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
Prima ho circondato la tabella, la lista e i loro rispettivi titoli con un div (un div per la tabella e un div per la lista). Questi due div li ho messi in un altro div, che sarebbe il div "contenitore". Poi con il CSS ho specificato che tutti i div che sono contenuti nel div "contenitore" devono avere la proprietà flex. Ovviamente ci sono un sacco di modi diversi per farlo.

P.S. Nel tuo codice ti sei scordato il tag "body".
 

Entra

oppure Accedi utilizzando

Discussioni Simili

Hot: Sei vaccinato? [sondaggio anonimo]

  • Primo ciclo vaccinale completo (1-2 dosi)

    Voti: 431 78.6%
  • Fatta 1a dose, in attesa della 2a

    Voti: 19 3.5%
  • Sono prenotato per la 1a dose

    Voti: 13 2.4%
  • Non so se vaccinarmi

    Voti: 15 2.7%
  • Non ho intenzione di vacciarmi

    Voti: 57 10.4%
  • Fatta anche la terza dose

    Voti: 13 2.4%