Pratique de l'alignement du texte en CSS
Copiez le code HTML suivant et résolvez les tâches indiquées ci-dessous :
<h1>Main page title</h1>
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apples</td>
<td>100</td>
<td>5kg</td>
</tr>
<tr>
<td>Oranges</td>
<td>200</td>
<td>6kg</td>
</tr>
<tr>
<td>Bananas</td>
<td>300</td>
<td>7kg</td>
</tr>
</table>
<h2>Secondary heading 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<h2>Secondary heading 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<h2>Secondary heading 3</h2>
<table border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
<tr>
<td>cell 7</td>
<td>cell 8</td>
<td>cell 9</td>
</tr>
</table>
Alignez tous les titres h1 sur le côté droit.
Centrez tous les titres h2.
Définissez une largeur de 500px pour toutes les tables.
Alignez le texte des cellules th sur le côté
gauche.
Centrez le texte des cellules td.
Définissez une largeur de 300px pour tous les paragraphes.
Justifiez le texte de tous les paragraphes simultanément sur les côtés droit et gauche.
Définissez une largeur de 300px pour les titres
h2. Centrez-les. Faites attention
au fait que le centrage se fera
à l'intérieur de ces 300px.