DOMANDA Allineare lista e tabella in HTML

EdwardTheGamer · 18 Maggio 2020

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?

Edmund Blackadder · 18 Maggio 2020

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".

Cerca

DOMANDA Allineare lista e tabella in HTML

EdwardTheGamer

Bestemmy

Edmund Blackadder

Utente Attivo

Ci sono discussioni simili a riguardo, dai un'occhiata!

Entra

Discussioni Simili