JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<title>Tableau èléments obsolètes</title>
	<style>
		table {
			border-collapse: collapse;	/* Ajoute une bordure simple */
			} 

		td {
			font-size: 1.2em;
			border: 1px solid black;
			padding: 10px;
		}
 
		.tr {
			text-align: center;
			font-size: 1.2em;
			color: blue;
			background-color: lightgray;
		}
		
		
		td {
			color: blue;
			background-color: antiquewhite;
		}
		
		caption {
			font-size: 1.2em;
			color: blue;
		}
		
		/* td a {
			display: block;
			height: 100%;
		} */
		
	</style>
	</head>
	
	<body>
		<table>
			<caption>LISTE D'ELEMENTS DE TEXTE OBSOLETES OU REDEFINIS</caption>
			<tr>
				<td class="tr">Elèment</td>
				<td class="tr">Remplacement</td>
				<td class="tr">Commentaire</td>
			</tr>
			
			<tr>
				<td><i>acronym</i></td>
				<td><i>abbr</i></td>
				<td>Un acronyme est une abréviation qui se prononce comme un mot (LASER, OTAN ...)</td>
			</tr>
			
			<tr>
				<td><i>applet</i></td>
				<td><i>embed ou object</i></td>
				<td>Permet d'intégrer du contenu externe à cet endroit dans le document. Le contenu peut être fourni par une application externe ou une autre source telle qu'un plugin du navigateur.</td>
			</tr>
			
			<tr>
				<td><i>basefont, font, big, center, tt, u</i></td>
				<td>Pour la mise en forme du texte, utiliser les mises en forme CSS beaucoup plus performantes.</td>
				<td>Non pris en charge par HTML5.</td>
			</tr>
  
			<tr>
				<td style="background-color: lightgray"></td>
				<td style="background-color: lightgray"> </td>
				<td>Pour le HTML5, plutôt que d'être rendus obsolètes, certains éléments HTML ont été redéfinis.</td>
			</tr>
			
			<tr>
				<td><i>dir</i></td>
				<td><i>Redéfini. Utiliser <i>ul</i></td>
				<td style="background-color:lightgray"></td>
			</tr>
			
			<tr>
				<td><i>frame, frameset, noframes</i></td>
				<td...