0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Чтобы оформить границы ячеек таблицы, достаточно применить CSS свойство<a>border</a>.</p>
1
<p>Чтобы оформить границы ячеек таблицы, достаточно применить CSS свойство<a>border</a>.</p>
2
<p>Рассмотрим пример:</p>
2
<p>Рассмотрим пример:</p>
3
<table> <tr> <th>Наименование</th> <th>Кол-во</th> </tr> <tr> <td>Груши</td> <td>10</td> </tr> <tr> <td>Яблоки</td> <td>7</td> </tr> <tr> <td>Мандарины</td> <td>5</td> </tr> </table><p>Стили:</p>
3
<table> <tr> <th>Наименование</th> <th>Кол-во</th> </tr> <tr> <td>Груши</td> <td>10</td> </tr> <tr> <td>Яблоки</td> <td>7</td> </tr> <tr> <td>Мандарины</td> <td>5</td> </tr> </table><p>Стили:</p>
4
table, td, th { /* задаем границу для всех элементов */ border: 3px solid #245488; } td, th { /* делаем отступ в ячейках, выставляем выравнивание текста */ padding: 10px 20px; text-align: center; }<p>Результат:</p>
4
table, td, th { /* задаем границу для всех элементов */ border: 3px solid #245488; } td, th { /* делаем отступ в ячейках, выставляем выравнивание текста */ padding: 10px 20px; text-align: center; }<p>Результат:</p>
5
<p>На рисунке выше видно, что граница "задвоилась", так как css свойство border применяется к каждому элементу таблицы - и к table, и к каждому th/td. Для того, чтобы "схлопнуть" такие границы достаточно применить свойство<a>border-collapse</a>.</p>
5
<p>На рисунке выше видно, что граница "задвоилась", так как css свойство border применяется к каждому элементу таблицы - и к table, и к каждому th/td. Для того, чтобы "схлопнуть" такие границы достаточно применить свойство<a>border-collapse</a>.</p>
6
<p>Стили:</p>
6
<p>Стили:</p>
7
table, td, th { border-collapse: collapse; border: 3px solid #245488; }<p>Результат:</p>
7
table, td, th { border-collapse: collapse; border: 3px solid #245488; }<p>Результат:</p>