Вирівнювання тексту вліво в CSS

Навчіться вирівнювати текст по лівому краю за допомогою властивості text-align.

Вирівнювання тексту вліво в CSS

Значення left у властивості text-align використовується для вирівнювання тексту по лівому краю.

Для звичайних абзаців p це значення не потрібно задавати, оскільки текст за замовчуванням вже вирівняний ліворуч.

Але деякі HTML-елементи мають інше стандартне вирівнювання. Наприклад, заголовки таблиць th за замовчуванням вирівнюються по центру.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Salary</th>
  </tr>

  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>200$</td>
  </tr>

  <tr>
    <td>Nick</td>
    <td>Mayers</td>
    <td>300$</td>
  </tr>
</table>

th {
  text-align: left;
}

table {
  width: 400px;
}

Значення	Результат
left	Текст вирівняний по лівому краю
center	Текст знаходиться по центру
right	Текст вирівняний по правому краю
justify	Текст вирівнюється по двох краях

Абзаци p за замовчуванням мають text-align: left.
Для таблиць th іноді потрібно вручну змінювати вирівнювання.
text-align: left часто використовується для повернення стандартного вигляду тексту.

❗ Важливо:

Значення left не змінює положення самого елемента, воно лише визначає розташування тексту всередині нього.

📌 Завдання:

Створіть таблицю з використанням тегів th та td.
За замовчуванням перевірте вирівнювання заголовків таблиці.
Додайте CSS text-align: left для тегів th.
Встановіть ширину таблиці 400px.

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

Для зміни вирівнювання заголовків таблиці використовуйте селектор th.

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

th {
  text-align: left;
}

table {
  width: 400px;
}