DOMANDA Allineare lista e tabella in HTML

Pubblicità
EdwardTheGamer

EdwardTheGamer

Bestemmy
Utente Èlite
Messaggi
4,307
Reazioni
2,068
Punteggio
133
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:
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".
 
Pubblicità
Pubblicità
Indietro
Top