Tableau responsive html

Hello !

Une présentation rapide s'impose : je m'appelle Anaïs et je suis novice en HTML/CSS. Je suis actuellement en train de travailler sur un projet de boutique en ligne sur le CMS Shopify.
Ayant un petit budget je travaille sur un template gratuit (que j'ai bidouillé à ma sauce).
J'ai déjà réalisé un tableau de 4 colonnes (ci-joint un petit aperçu)
Avec ce code (on ne se moque pas...) :

<table>
				<!--ligne1-->
				<tbody>
<tr>
					<!--colonne1-->
					<td>
						<center>
<img src="https://image.noelshack.com/fichiers/2019/10/6/1552171897-secur.png" width="50" height="70">
					</center>
</td>
					<!--colonne2-->
					<td>
						<center>
<img src="https://image.noelshack.com/fichiers/2019/10/6/1552171191-livraison.png" width="80" height="50">
					</center>
</td>
					<!--colonne3-->
					<td>
						<center>
<img src="https://image.noelshack.com/fichiers/2019/10/6/1552172108-retour.png" width="45" height="60">
					</center>

<!--colonne4-->
					</td>
<td>
						<center>
<img src="https://image.noelshack.com/fichiers/2019/10/7/1552180416-mail.png" width="70" height="50">
					</center>
</td>

				</tr>
				<!--ligne2-->
				<tr>
					<!--colonne1-->
					<td><center>
						<h2>paiement<br>sécurisé
					</h2>
</center></td>
					<!--colonne2-->
					<td>
						<h2>expédition<br>rapide
					</h2>
</td>
					<!--colonne3-->
					<td>
						<h2>retours <br>&amp; échanges
					</h2>
</td>
<!--colonne3-->
					<td>
						<h2>contact<br><a href="mailto:contact@holaguapa.fr">contact@holaguapa.fr</a>


</h2>
</td>
			</tr>
</tbody>
</table>

Bien évidemment sur desktop c'est joli-beau mais sur mobile c'est une horreur... comment le rendre responsive ? Que les icônes+le titre apparaissent l'unes en dessous de l'autre ?

Merci d'avance
(PS : et je suis strasbourgeoise, vive l'Alsace <3)
Modifié par anais68 (10 Mar 2019 - 16:41)

Hello !

Premièrement, est-ce que c'est toi qui a codé le tableau ou c'est le CMS qui l'a généré ?
J'ai besoin de savoir parce que sémantiquement je ne comprends pas l'utilisation de la balise 'table' içi. Ce n'est pas un tableau du tout....

OK, bonne nouvelle!

Essaie de recodé en utilisant d'autres balises, par exemple 'div' parce que la balise 'table' n'est pas justifiée ici. Le HTML sert à balisé le contenu sémantiquement. Il ne faut pas l'utiliser pour de la mise en page, ce qui est le rôle du CSS. En plus, les tableaux sont chiant à manipuler en responsive.

La balise 'center' n'est plus utilisée:
https://www.w3schools.com/tags/tag_center.asp
Modifié par allan00958 (11 Mar 2019 - 00:01)