DOMANDA Allineare lista e tabella in HTML

EdwardTheGamer

Utente Èlite
1,538
582
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

Nuovo Utente
117
45
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