Using the differing precedences of row, column and cell borders to style a table
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Using the differing precedences of row, column and cell borders to style a table</title> <style type="text/css" media="all"> table { font: 1em/1.5em Georgia, serif; border-style: none hidden; margin: 1em 0 0 0; border-collapse: collapse; } td { width: 6em; vertical-align: baseline; padding: 0 0.5em; border: 1px dashed black; } tbody { border: 2px solid black; } tr { border: 1px solid black; } colgroup { border: 4px solid black; border-style: none solid; } col#col1 { border-color: black; border-width: 1px; border-style: none solid; } </style> </head> <body> <table> <colgroup> <col id="col1"/> <col /> </colgroup> <colgroup> <col /> <col /> <col /> </colgroup> <tbody> <tr> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> </tr> <tr> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> </tr> <tr> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> </tr> </tbody> <tbody> <tr> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> </tr> <tr> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> </tr> <tr> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> <td>Lorem ipsum</td> </tr> </tbody> </table> </body> </html>
|
|
|
|
|
HTML code for linking to this page:
Related in same category :
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
|