[HTML] Aggiungere una tabella a fianco di altre tabelle...

rickcosto

Nuovo Utente
2 Feb 2017
3
0
1
50
Salve!
Premetto che sono completamente a digiuno di html e di come si fa in generale un sito web.
Devo fare con Bluegriffon un sito per un compito di scuola di un ragazzino e lo stavo creando per mezzo di tabelle. Dopo aver creato a sinistra del sito i pulsanti di navigazione pensavo di posizionare una tabella a destra per i contenuti. Il problema è che quando inserisco la tabella, quelle di sinistra vanno a capo e quindi non riesco ad affiancarla lasciando inalterate le altre! Per essere più chiaro allego una foto e qui sotto il codice html.
Grazie e scusate la domanda banale.

Codice:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>prova</title>
<style type="text/css">
#a1 {
text-align: center;
text-transform: uppercase;
font-size: xx-large;
color: red;
background-color: #99ffff;
}
#a2 {
text-align: center;
}
</style></head>
<body>
<table style="width: 100%; height: 136px;" border="1">
<tbody>
<tr>
<td id="a1">Energia Idroelettrica</td>
</tr>
</tbody>
</table>
<table style="width: 20%; height: 90px;" border="1">
<tbody>
<tr>
<td id="a2" style="background-color: #99ffff;">HOME</td>
</tr>
</tbody>
</table>
<table style="width: 20%; height: 90px;" border="1">
<tbody>
<tr>
<td id="a2" style="background-color: #99ffff;">STORIA<br>
</td>
</tr>
</tbody>
</table>
<table style="width: 20%; height: 90px;" border="1">
<tbody>
<tr>
<td id="a2" style="background-color: #99ffff;">CENTRALI</td>
</tr>
</tbody>
</table>
<table style="width: 20%; height: 90px;" border="1">
<tbody>
<tr>
<td id="a2" style="background-color: #99ffff;">DIFFUSIONE</td>
</tr>
</tbody>
</table>
</body>
</html>
 

Allegati

Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.292
331
83
Per acere delle tabelle che non si modificano automaticamente bisogna dare delle misure firre alla tabella e alle celle.
Comunque i layout fatti a tabelle oltre che non si fanno più da tanti anni non è neanche giusto farli in questo modo per tanti e ovvi motivi.
Le tabelle vanno usate per dati tabellari e non per fare pagine web.

P,S,
Oer questa volta te lo fatto io ma in seguito ti prego si usare l'appropriato tag o funzione dalla barre degli strumenti per postare del codice come da regolamento del forum che sei pregato di leggere.
Grazie
box inserisci 2.png.JPG
 

Ibernato

Utente Attivo
2 Giu 2016
70
6
8
27
Come detto da @Max 1 , non si usano più le tabelle per fare un sito web.
Se sei a digiuno di HTML e CSS allora consiglio di leggerti prima dei tutorial e poi fare il sito oppure fartelo fare da altri.
Nel forum c'è una sezione apposita nel caso in cui vuoi proporre di fartelo fare da qualcun'altro (che suppongo non lo farà gratis)
 

rickcosto

Nuovo Utente
2 Feb 2017
3
0
1
50
Grazie ragazzi per le pronte risposte e scusa Max 1 per aver postato male il codice. Provero' ad approfondire meglio l' argomento.
Grazie di nuovo. Ciao!
 

Ibernato

Utente Attivo
2 Giu 2016
70
6
8
27
@rickcosto comunque per fare quello che vuoi tu basta fare un divUno in alto, poi un divDue sotto il divUno flottato a sinistra, e un divTre alla destra del divDue aggiungendo un pò di margin =)

HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#uno{
    width:100%;
    border: 1px solid black;
    text-align:center;
    padding:10px;
}

#due{
    float:left;
    border: 1px solid black;
    margin-top:10px;
}

div#due a{
    text-decoration:none;
}

div#due > ul {
list-style-type: none;
padding:10px;
}

#tre{
border:1px solid black;
margin:10px auto;
width:500px;
height:200px;
padding:5px;
}
</style>
</head>
<body>

<div id="uno">
<b> Elettrici</b>
</div>

<div id="due">
<ul>
<li><a href="#"> Prova 1 </a> </li>
<li><a href="#"> Prova 1 </a> </li>
<li><a href="#"> Prova 1 </a> </li>
</ul>
</div>

<div id="tre">
<b> Scrivi quello che vuoi </b>
</div>

</body>
</html>
 
Ultima modifica:

rickcosto

Nuovo Utente
2 Feb 2017
3
0
1
50
Grazie Ibernato per l' interessamento. Quello che hai scritto però è per me un po' arabo. E' che, vedi, mi hanno chiesto degli amici di aiutare il proprio figlio a fare un compito di tecnica (si, non informatica, tecnica!) dove per approfondire una ricerca sull' energia idroelettrica devono fare un sito con Bluegriffon! L' hanno chiesto a me perché sanno che "smanetto" sui computer. A me in realtà piace la grafica 3d e altre cose, ma non ho competenze sull' HTML. Ho accettato di aiutarli perché pensavo di cavarmela con un po' di tutorial e chiedendo a voi esperti qualche aiutino sui forum. Confidavo inoltre sui programmi WYSIWYG. Cosa vuoi che sia, funzionerà un po' come Photoshop, "disegni" la pagina web, qualche foto di centrali qua e la, un po' di testi e vai!
Ho scoperto invece che la materia non è affatto semplice, anzi! E' complicato anche fare un sito banale come quella schifezza che ho allegato al primo post. Ho capito che per costruire pagine web non basta affatto avere "talento" grafico, ma piuttosto competenze approfondite di scrittura di codice puro. Confesso quindi di aver peccato di leggerezza, ma ormai la frittata è fatta, devo arrangiarmi in qualche modo, anche se i tempi sono ristretti.
Grazie di nuovo.
Ciao.
 

Ibernato

Utente Attivo
2 Giu 2016
70
6
8
27
@rickcosto eh si, per scrivere un pagina web c'è bisogno di conoscenze di HTML e CSS.
Sul forum noi possiamo aiutarti a correggere il codice, ma non a costruirti un sito intero.