HTML Table Borders

[Guest]

HTML Table Borders


HTML tables can have borders of different styles and shapes.

How To Add a Border
To add a border, use the CSS border property on
table, th, and
td elements:


 
 
 


 
 
 


 
 
 



Example

table, th, td
{
  border: 1px solid black;
}
Try it Yourself »


Collapsed Table Borders
To avoid having double borders like in the example above, set the CSS border-collapse
property to collapse.
This will make the borders collapse into a single border:


 
 
 


 
 
 


 
 
 



Example

table, th, td {  border: 1px solid black;
 
border-collapse: collapse;}
Try it Yourself »








Style Table Borders
If you set a background color of each cell,
and give the border a white color (the same as the document background),
you get the impression of an invisible border:


 
 
 


 
 
 


 
 
 



Example

table, th, td {  border: 1px solid white;
 
border-collapse: collapse;}th, td {  background-color: #96D4D4;
}
Try it Yourself »


Round Table Borders
With the border-radius property, the borders get rounded corners:


 
 
 


 
 
 


 
 
 



Example

table, th, td {  border: 1px solid
black;
 
border-radius: 10px;}
Try it Yourself »


Skip the border around the table by leaving out table from the css selector:


 
 
 


 
 
 


 
 
 



Example

th, td {  border: 1px solid
black;
 
border-radius: 10px;}
Try it Yourself »


Dotted Table Borders
With the border-style property, you can set the
appearance of the border.


 
 
 


 
 
 


 
 
 


The following values are allowed:

dotted     
dashed     
solid     
double     
groove     
ridge     
inset     
outset     
none     
hidden     


Example

 th, td { 
border-style: dotted;}
Try it Yourself »


Border Color
With the border-color property, you can set the color of the border.


 
 
 


 
 
 


 
 
 



Example

 th, td { 
border-color: #96D4D4;}
Try it Yourself »














★
+1

Reference: https://www.w3schools.com/html/html_table_borders.asp

[alexseen]

Un día estaba esperando turno en una oficina y necesitaba algo que me mantenga ocupado sin hacer ruido. Así encontré chicken road game, que se veía liviano y sin tanta vuelta. Acá en Perú funciona bastante bien, no se cuelga y las partidas son rápidas, así que pude jugar varias sin sentir que pasaba el tiempo lento. Me gustó que no exige aprender nada complicado, solo entrar y jugar. Al final me ayudó a que la espera no se sintiera tan pesada.

[MaxSteele]

This is a helpful little guide on table borders! It's easy to forget the specific CSS syntax for these things. I particularly appreciate the tip about border-collapse, double borders can really make a table look cluttered. Speaking of clean looks and satisfying visuals, it reminds me a bit of the aesthetic in Drift Hunters, a simple but captivating game with smooth, stylized graphics. Keeping things sleek and tidy is key, whether you're designing a website or drifting around corners!

[Wilsony]

That's a helpful overview of HTML table borders! I've definitely struggled with those double borders before. The border-collapse property is a lifesaver. It's interesting how simple CSS can have such a big impact on visual presentation. Thinking about visual impact and destruction in a fun way makes me think of Solar Smash and its simulations of planetary annihilation – a totally different application of visual design! Good tip about specifying borders for table, th, and td elements individually too!