Практика на вирівнювання тексту в CSS

Закріпіть роботу з властивістю text-align, шириною елементів та вирівнюванням тексту в CSS.

Практика на вирівнювання тексту в CSS

Скопіюйте HTML-код та виконайте завдання, використовуючи CSS-властивості text-align та width.

<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 elit.
</p>

<h2>Secondary heading 2</h2>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

<h2>Secondary heading 3</h2>

<table border="1">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
  </tr>
</table>

❗ Важливо:

Властивість text-align змінює розташування тексту всередині елемента. Властивість width задає ширину самого елемента.

📌 Завдання:

Поставте всі заголовки h1 по правому краю.
Поставте всі заголовки h2 по центру.
Встановіть усім таблицям ширину 500px.
Поставте текст у комірках th по лівому краю.
Поставте текст у комірках td по центру.
Встановіть усім абзацам ширину 300px.
Вирівняйте текст усіх абзаців одночасно по правому і лівому краю.
Встановіть заголовкам h2 ширину 300px та вирівняйте текст по центру всередині цього блоку.

💡 Показати підказку

Для вирівнювання тексту використовуйте text-align. Для зміни ширини елементів використовуйте width.

✅ Показати відповідь

h1 {
  text-align: right;
}

h2 {
  width: 300px;
  text-align: center;
}

table {
  width: 500px;
}

th {
  text-align: left;
}

td {
  text-align: center;
}

p {
  width: 300px;
  text-align: justify;
}