HTML Diff
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 &lt;table&gt; &lt;tr&gt; &lt;th&gt;Наименование&lt;/th&gt; &lt;th&gt;Кол-во&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Груши&lt;/td&gt; &lt;td&gt;10&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Яблоки&lt;/td&gt; &lt;td&gt;7&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Мандарины&lt;/td&gt; &lt;td&gt;5&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;<p>Стили:</p>
3 &lt;table&gt; &lt;tr&gt; &lt;th&gt;Наименование&lt;/th&gt; &lt;th&gt;Кол-во&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Груши&lt;/td&gt; &lt;td&gt;10&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Яблоки&lt;/td&gt; &lt;td&gt;7&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Мандарины&lt;/td&gt; &lt;td&gt;5&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;<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>