Создание таблицы с выровненными колонками в HTML и CSS - это достаточно простая задача. Вот основные шаги и пример, как это можно сделать.
### HTML
Создайте базовую таблицу с заголовками и строками данных:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Таблица</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Название</th>
<th>Возраст</th>
<th>Город</th>
</tr>
</thead>
<tbody>
<tr>
<td>Иван</td>
<td>25</td>
<td>Москва</td>
</tr>
<tr>
<td>Мария</td>
<td>30</td>
<td>Санкт-Петербург</td>
</tr>
<tr>
<td>Алексей</td>
<td>28</td>
<td>Екатеринбург</td>
</tr>
</tbody>
</table>
</body>
</html>
```
### CSS
Чтобы все колонки отображались в одном формате и были выровнены по стандарту, добавьте соответствующие стили в файл `styles.css`:
```css
table {
width: 100%;
border-collapse: collapse; /* Убирает двойные границы */
}
th, td {
border: 1px solid #ddd; /* Границы ячеек */
padding: 8px; /* Отступы внутри ячеек */
text-align: left; /* Выравнивание текста */
}
th {
background-color: #f2f2f2; /* Цвет фона для заголовков */
font-weight: bold; /* Сделать текст жирным */
}
tr:hover {
background-color: #f5f5f5; /* Цвет фона при наведении */
}
```
### Рекомендации
1. **Ширина колонок**: Если вы хотите задать ширину для определённых колонок, вы можете использовать CSS для конкретного `th` или `td`, назначая им классы.
2. **Выравнивание содержимого**: Используйте свойства `text-align` для выравнивания содержимого ячеек. Например, для чисел можно использовать `text-align: right;`, чтобы они выглядели более аккуратно.
3. **Адаптивность**: Убедитесь, что таблица выглядит хорошо на разных экранах, возможно, используя медиа-запросы в CSS для регулирования отображения при изменении ширины экрана.
Таким образом, следуя этим шагам, вы можете создать таблицу с корректно выровненными колонками и единообразным форматом отображения.