Html, Css & Javascript in easy steps Special Edition by Mike McGrath

Author:Mike McGrath
Language: eng
Format: epub, pdf
Publisher: In Easy Steps
Published: 2020-07-30T00:00:00+00:00

The separate keyword can also be specified to the border-collapse property – to explicitly prevent collapsing borders.

Create an HTML document containing two tables with similar content

<table><tr>

<td class=“twin”>1</td>

<td class=“dots”>2</td>

<td class=“full”>3</td> </tr></table>

<table class=“fold”><tr>

<td class=“twin”>1</td>

<td class=“dots”>2</td>

<td class=“full”>3</td> </tr></table>

collapse.html

Add a style sheet containing rules to specify table width and its features

table { width : 500px ; height : 60px ; margin : 20px ; }

Next, add style rules to specify the size and color of the table border and each table cell

table { border : 2px solid DeepPink ; }

td.twin { border : 5px double DeepPink ; }

td.dots { border : 5px dotted DeepPink ; }

td.full { border : 5px solid DeepPink ; }

Now, add a style rule to collapse the borders of the second table

table.fold { border-collapse : collapse ; }

Save the HTML document then open the web page in a browser to see tables drawn with both regular and collapsed borders

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.