Рамка навколо осередків таблиці встановлюється за допомогою властивості border, вона додається до селекторів td та th. Через border ми відразу ж задаємо товщину рамки, її колір і стиль (приклад 1).
Приклад 1. Властивість border<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Рамка</title> <style> table { width: 100%; /* Ширина таблиці */ } td { border: 2px solid #009542; /* Параметри рамки */ } </style> </head> <body> <table> <tr><td>Леонардо</td><td>5</td><td>8</td></tr> <tr><td>Рафаель</td><td>4</td><td>11</td></tr> <tr><td>Мікеланджело</td><td>24</td><td>9</td></tr> <tr><td>Донателло</td><td>2</td><td>13</td></tr> </table> </body> </html>
Результат цього прикладу показаний на рис. 1.
Мал. 1. Рамка навколо осередків
Спочатку між осередками міститься невеликий проміжок, у результаті кожен осередок виглядає незалежним. Щоб у таблиці отримати сітку, до table треба додати властивість border-collapse зі значенням collapse (приклад 2).
Приклад 2. Властивість border-collapse
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Рамка</title> <style> table { width: 100%; /* Ширина таблиці */
border-collapse: collapse; }
td { border: 2px solid #009542; /* Параметри рамки */
}
</style>
</head>
<body> <table> <tr><td>Леонардо</td><td>5</td><td>8</td></tr> <tr><td>Рафаель</td><td>4</td><td>11</td></tr> <tr><td>Мікеланджело</td><td>24</td><td>9</td></tr> <tr><td>Донателло</td><td>2</td><td>13</td></tr>
</table>
</body>
</html>Результат цього прикладу показаний на рис. 2.
Мал. 2. Рамка навколо осередків