Tableaux sur la mame ligne

Résolu/Fermé
RomainGA Messages postés 110 Date d'inscription mardi 4 juillet 2017 Statut Membre Dernière intervention 19 mai 2024 - 29 nov. 2020 à 12:19
 Utilisateur anonyme - 29 nov. 2020 à 17:28
Bonjour, je dois mettre 4 table sur la même lignes, j ai mis chaques tables dans des div

<div class="bgfoot">
		<div class="footsm">
			<div>
				<table>
					<tr>
						<td class="logofoot">logo</td>
					</tr>
					<tr>
						<td class="SITfoot">Stay in touch</td>
					</tr>
					<tr>
						<td><img src="img/facebook.png"><img src="img/google-plus.png"><img src="img/twitter.png"><img src="img/instagram.png"></td>
					</tr>
				</table>
			</div>

			<div>
				<table>
					<tr>
						<td class="foottitles">Quick Links</td>
					</tr>
					<tr class="footcontent"><td>About</td></tr>
					<tr class="footcontent"><td>Home</td></tr>
					<tr class="footcontent"><td>Pricing</td></tr>
					<tr class="footcontent"><td>Location</td></tr>
					<tr class="footcontent"><td>Office</td></tr>
				</table>
			</div>

			<div>
				<table>
					<tr class="foottitles"><td>Hours</td><td></td></tr>
					<tr class="footcontent"><td>Monday :</td><td>9:00-18:00</td></tr>
					<tr class="footcontent"><td>Tuesday :</td><td>9:00-18:00</td></tr>
					<tr class="footcontent"><td>Wednesday :</td><td>9:00-18:00</td></tr>
					<tr class="footcontent"><td>Thursday :</td><td>9:00-18:00</td></tr>
					<tr class="footcontent"><td>Friday :</td><td>9:00-18:00</td></tr>
				</table>
			</div>

			<div class="footcontent">
				<table>
					<tr class="foottitles"><td>Contact</td><td></td></tr>
					<tr class="footcontent"><td></td><td>000-000-000</td></tr>
					<tr class="footcontent"><td></td><td>info@email.com</td></tr>
					<tr class="footcontent"><td></td><td>Nex York, US</td></tr>
				</table>
			</div>
		</div>
	</div>

.bgfoot {
	background-image: url('img/footer.png');
	height: 200px;
}
.foottitles{
	color: white;
	font-weight: bold;
}
.footcontent{
	color: white;
}
.footsm{
	float: left;
}

1 réponse

Utilisateur anonyme
29 nov. 2020 à 17:28
les DIV sont des éléments de type BLOCK par défaut ; il s'en affiche donc un par ligne.
Avec le style "display:inline-block" on peut changer ce comportement pour mettre des blocks en ligne.

Je doute de l'utilité de mettre les tableaux dans des DIV mais on peut leur appliquer le inline-block ou les appliquer directement au TABLE si on ne les mets pas dans des DIV
0