Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

Tabel breedte blijft over de hele pagina??

bewerkt do 24 mrt 2016 in XHTML, XML Posts: 4
Hallo,

Ik ben vrij nieuw met het schrijven in HTML (heb er wel een aantal lessen in gehad, maar nog niet zo veel ervaring).
Nu heb ik op een website een tabel gemaakt voor de openingstijden. Die wil ik graag aan de linkerkant van het scherm en dan ongeveer de helft van de pagina, zodat de Google Map er nog naast kan. Ik heb de Table Width op 50% gezet, maar de tabel blijft maar over de hele breedte van de pagina staan. Dit is de tabel:
<table width="50%">
<tr>
<td align="left" width="50%">Maandag:</td>
<td align="left" width="50%">10:30 – 17:30</td>
</tr>
<tr>
<td align="left" width="50%">Dinsdag:</td>
<td align="left" width="50%">09:30 – 17:30</td>
</tr>
<tr>
<td align="left" width="50%">Woensdag:</td>
<td align="left" width="50%">09:30 – 17:30</td>
</tr>
<tr>
<td align="left" width="50%">Donderdag:</td>
<td align="left" width="50%">09:30 – 17:30</td>
</tr>
<tr>
<td align="left" width="50%">Vrijdag:</td>
<td align="left" width="50%">09:30 – 20:00</td>
</tr>
<tr>
<td align="left" width="50%">Zaterdag:</td>
<td align="left" width="50%">09:30 – 17:30</td>
</tr>
<tr>
<td align="left" width="50%">Zondag:</td>
<td align="left" width="50%">Gesloten*</td>
</tr>
</table>
Kan iemand mij vertellen wat ik fout doe??

Reacties

  • bewerkt do 24 mrt 2016
    PMPosts: 4
    Of moet ik het helemaal anders doen?
  • PMPosts: 879
    is me nog steeds onduidelijk hoe je het precies wilt hebben. Staat je webpagina online? anders maak ff een screenshot hoe je het zelf in gedachten had
  • Jaa webpagina staat online. Het gaat om de volgende pagina:
    http://liesls.nl/index.php/contact/

    Je ziet nu dat de tabel over de hele paginabreedte staat, maar ik wil graag dat die Google Maps onderaan naast de openingstijden komt te staan. Ik had het eerst zonder tabel neergezet, maar dan staan de tijden niet mooi recht onder elkaar.
  • Kijk eens in style.css op regel 183.
  • bewerkt do 24 mrt 2016
    PMPosts: 879
    ik heb wat veranderingen doorgevoerd in zowel je html als in je style:
    Hieronder je html vanaf je <div class="entry-content">
    						</header><!-- .entry-header -->
    <div class="entry-content">

    <div class="openingstijden">
    <h3>Openingstijden:</h3>
    <table>
    <tr>
    <td>Maandag:</td>
    <td>10:30 – 17:30</td>
    </tr>
    <tr>
    <td>Dinsdag:</td>
    <td>09:30 – 17:30</td>
    </tr>
    <tr>
    <td>Woensdag:</td>
    <td>09:30 – 17:30</td>
    </tr>
    <tr>
    <td>Donderdag:</td>
    <td>09:30 – 17:30</td>
    </tr>
    <tr>
    <td>Vrijdag:</td>
    <td>09:30 – 20:00</td>
    </tr>
    <tr>
    <td>Zaterdag:</td>
    <td>09:30 – 17:30</td>
    </tr>
    <tr>
    <td>Zondag:</td>
    <td>Gesloten*</td>
    </tr>
    </table>
    <p>*m.u.v. koopzondag van 12:00 – 17:30</p>
    </div> <!-- einde openingstijden-->


    <!-- google maps -->
    <div id="wpgmza_map"></div>

    <h3>Contactformulier:</h3>
    <p>
    <form method="post" ......en zo verder
    In je style.css vanaf regel 183 (zoals vinTage ook al opmerkte):
    table {
    /*width:100%;*/ /* uitgeschakeld */
    border-collapse:collapse;
    text-align:center;
    margin-bottom:24px;
    }

    table tr:nth-child(even) {
    background:#F8F8F8;
    }

    table th,
    table td {
    padding:6px 0;
    text-align: left;
    padding-right: 10px; /* afstand tussen de dagen en de tijden*/
    }

    table th {
    font-weight:600;
    }

    #wpgmza_map {
    display:block;
    overflow:auto;
    width:50%;
    height:400px;
    float: left;
    }
    #wpgmza_map img {
    max-width:none !important;
    }
    .wpgmza_widget {
    overflow: auto;
    }
    .openingstijden{
    width: 50%;
    float: left;
    }
    ziet er nu uit zoals hieronder
    contact.jpg
    1191 x 861 - 165K
    contact.jpg 164.9K
  • Top dankje!

    Natuurlijk beginnersfout, opmaak in de HTML doen. :(
Login of Registreer om te reageren.