Table Borders
The look of an HTML table can be greatly improved with CSS:
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Berglunds snabbköp | Christina Berglund | Sweden |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Königlich Essen | Philip Cramer | Germany |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Table Borders
Use the border property in CSS to define table borders.
The <table>, <th>, and <td> components are specified to have a solid border in the example below:
.........TABLE MUKVU.......
Example
table, th, td {
border: 1px solid;
}
Full-Width Table
Sometimes the above table appears small. To create a full-width table that fills the screen, add width: 100% to the <table> element:
.........TABLE MUKVU.......
Example
table {
width: 100%;
}
Double Borders
Take note of the multiple borders on the table in the aforementioned cases. This is a result of the distinct boundaries on the table, as well as the <th> and <td> elements.
Collapse Table Borders
Whether the table borders should be combined into one border is determined by the border-collapse property:
.........TABLE MUKVU.......
Example
table {
border-collapse: collapse;
}
If you only want a border around the table, only specify the border property for <table>:
.........TABLE MUKVU.......
Example
table {
border: 1px solid;
}
