HTML Table Border
HTML Tables have various types of border and shapes.
To add border for html table we use the CSS border property, for table,
th & td .
Example of bordered table
<style>
table, th, tr {
border: 1px solid black;
}
</style>
Bordered table
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Denver |
Example of Collapsed border
<style>
table, th, tr {
border: 1px solid black;
border-collapse: collapse;
}
</style>
Collapsed border
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Denver |
Example of Style colored border
<style>
table, th, tr {
border: 2px solid white;
border-collapse: collapse;
}
th, tr {
background-color : lightBlue;
}
</style>
style Colored border
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Denver |
Example of Rounded border
<style>
table, th, tr {
border: 2px solid white;
border-collapse: collapse;
border-radius: 10px;
}
</style>Border style
dotted border
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Denver |
Border style have different properties
dotted :dashed :soild :double :groove :ridge :inset :outset :none :hidden :
Example of border style
<style>
table, th, tr {
border: 2px solid white;
border-collapse: collapse;
border-style: dotted;
}
</style>