DOMANDA Allineare lista e tabella in HTML

EdwardTheGamer

Bestemmiatore Abusivo
Utente Èlite
2,098
997
CPU
AMD FX 6300
Scheda Madre
ASRock 960GM-VGS3 FX
Hard Disk
Crucial MX500 + Hitachi Ultrastar + Toshiba
RAM
2x4GB DDR3 1600Mhz
Scheda Video
AMD Sapphire RX 580 8GB
Monitor
1080p@60hz
Alimentatore
Sharkoon Silentstorm Icewind 550W
Sistema Operativo
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
192
101
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 del momento