The space between two rows in a table can be done using CSS border-spacing and border-collapse property. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of table is collapse or not. The border-spacing attribute can only be used if border-collapse attribute is set to separate.
Example:
<!DOCTYPE html> < html > < head > < style > table { border-collapse: collapse; } th { background-color:green; Color:white; } th, td { width:150px; text-align:center; border:1px solid black; padding:5px } .geeks { border-right:hidden; } .gfg { border-collapse:separate; border-spacing:0 15px; } h1 { color:green; } </ style > </ head > < body > < center > < h1 >GeeksforGeeks</ h1 > < h2 >Row spacing in a table</ h2 > < table > < tr > < th >Employee ID</ th > < th >Name</ th > < th >Gender</ th > < th >Age</ th > </ tr > </ table > < table class = "gfg" > < tr > < td class = "geeks" >10001</ td > < td >Thomas</ td > < td >M</ td > < td >32</ td > </ tr > < tr > < td class = "geeks" >10002</ td > < td >Sally</ td > < td >F</ td > < td >28</ td > </ tr > < tr > < td class = "geeks" >10003</ td > < td >Anthony</ td > < td >M</ td > < td >24</ td > </ tr > </ table > </ center > </ body > </ html > |
Output:
leave a comment
0 Comments