Tabel breedte blijft over de hele pagina??

Sasja

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??

Sasja

Of moet ik het helemaal anders doen?

nuet

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

Sasja

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.

vinTage

Kijk eens in style.css op regel 183.

nuet

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

Sasja

Top dankje!

Natuurlijk beginnersfout, opmaak in de HTML doen.