Övning på textjustering i CSS
Kopiera följande HTML-kod till dig och lös de nedanstående uppgifter för den:
html<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>
Задание 1
Placera alla rubriker h1 till höger.
Задание 2
Placera alla rubriker h2 i mitten.
Задание 3
Sätt bredden på alla tabeller till 500px.
Задание 4
Placera texten i cellerna th till vänster.
Задание 5
Placera texten i cellerna td i mitten.
Задание 6
Sätt bredden på alla stycken till 300px.
Задание 7
Justera texten i alla stycken samtidigt både till höger och till vänster.
Задание 8
Sätt bredden på rubrikerna h2 till
300px. Placera dem i mitten. Var
uppmärksam på att centreringen kommer att ske
inuti dessa 300px.