Как можно воссоздать визуальный стиль таблицы?

Question

Рамиз

css

Как можно воссоздать визуальный стиль таблицы?

Как создать таблицу в HTML с таким же дизайном, как на приложенном фото? У меня есть несколько проблем:
1. Я хочу установить ширину границы таблицы 1px и добавить закругление углов с помощью свойства border-radius. Однако, при использовании свойства border-collapse: collapse, границы становятся толщиной 0px и закругление не работает.

2. У элементов таблицы выравнивание по левому краю, но числа выравниваются по правому краю. Я хочу, чтобы числа были выровнены по разрядам.

Буду благодарен за любые идеи и рекомендации!

13 сентября 2023 г. 11:49

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для воссоздания визуального стиля таблицы, подобного указанному в приложенном фото, можно использовать следующий код HTML и CSS:

HTML:
```html
<table>
  <tr>
    <th>Заголовок 1</th>
    <th>Заголовок 2</th>
    <th>Заголовок 3</th>
  </tr>
  <tr>
    <td>Значение 1</td>
    <td>Значение 2</td>
    <td>Значение 3</td>
  </tr>
  <tr>
    <td>Значение 4</td>
    <td>Значение 5</td>
    <td>Значение 6</td>
  </tr>
</table>
```

CSS:
```css
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid black;
  border-radius: 5px;
}
td, th {
  padding: 10px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
}
td {
  border-top: 1px solid #f2f2f2;
}
td:last-child {
  text-align: right;
}
```

Обратите внимание на следующие элементы в коде:

1. `border-collapse: separate;` - это свойство разделяет границы ячеек таблицы и позволяет использовать закругление углов.

2. `border-spacing: 0;` - это свойство устанавливает расстояние между границами ячеек в 0 пикселей.

3. `border: 1px solid black;` - это свойство задает ширину и цвет границы таблицы.

4. `border-radius: 5px;` - это свойство добавляет закругление углов таблицы.

5. `background-color: #f2f2f2;` - это свойство задает цвет фона заголовочных ячеек таблицы.

6. `text-align: right;` - это свойство выравнивает текст в ячейках по правому краю.

Таким образом, с использованием указанных выше кодов вы можете создать таблицу с визуальным стилем, аналогичным приложенному фото.