Tabella html come nel sito gazzetta

**LeoL** · 12-09-2013, 12:53

Buongiorno a tutti volevo chiedere come era possibile costruire un tabella in html in stile gazzetta cosi

, cioè avere a disposizione due bottoni in alto per poter inserire due differenti tabelle di dati. Grazie in anticipo :-D

**giggi1991** · 12-09-2013, 16:10

Originariamente inviato da LeoL
Buongiorno a tutti volevo chiedere come era possibile costruire un tabella in html in stile gazzetta cosi

, cioè avere a disposizione due bottoni in alto per poter inserire due differenti tabelle di dati. Grazie in anticipo :-D

Per realizzare una cosa cosi (pannello con i tab) puoi fare una cosa del genere:

codice:

<style type="text/css">
#tab { font-family: Verdana, sans-serif; font-size: 14px; }
#tab li {
    list-style: none;
    float: left;
    width: 150px;
    height: 35px;
    margin: 0 5px;
}
    #tab li a {
        background-color: #dedede;
        color: #222;
        font-weight: bold;
        text-decoration: none;
        width: 150px;
        height: 35px;
        display: block;
        float: left;
        line-height: 35px;
        text-align: center;
    }
        #tab li a:hover,
        #tab li a:active { background-color: #ededed; }

	div.content {
        color: #222;
        font-family: Verdana;
        font-size: 12px;
        background-color: #efefef;
        padding: 25px;
        width: 600px;
        height: 350px;
        line-height: 22px;
    }
	
	#container { clear: both; height: 400px; overflow: hidden; }
	
</style>
	
</head>
<body>



<ul id="tab">[*]Tab 1[*]Tab 2[*]Tab 3[/list]
<div id="container">
    <div class="content">
        <a name="tab1" id="tab1"></a>
        <h2>Tab 1</h2>

        

Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>

    </div>
    <div class="content">
        <a name="tab2" id="tab2"></a>
        <h2>Tab 2</h2>

        

Convallis elit tortor ut ante libero Aenean Maecenas semper et interdum. Id lorem id dui orci risus volutpat Curabitur Curabitur a urna. Vivamus sit lorem venenatis Nulla semper justo pretium id tincidunt Vestibulum. Vestibulum justo volutpat non.</p>
    </div>
    <div class="content">
        <a name="tab3" id="tab3"></a>
        <h2>Tab 3</h2>

        

Urna justo quam nunc urna sem facilisis nibh Curabitur tellus quis. Orci sem ligula platea parturient justo Morbi id cursus tortor adipiscing. Tortor convallis pede orci Quisque id Nam condimentum sed eu Sed. Cum orci Quisque vitae egestas vitae nulla Cum fermentum egestas ante. Congue eu elit.</p>
    </div>
</div>

Ora puoi adattarlo alle tue esigenze. Ciao

**LeoL** · 13-09-2013, 15:44

Grazie

Discussione: Tabella html come nel sito gazzetta

Strumenti discussione

Ricerca discussione

Visualizza

Tabella html come nel sito gazzetta

Re: Tabella html come nel sito gazzetta

Permessi di invio