24.08.2016 Views

HTML and CSS design and build websites

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Article Border on Empty Cells<br />

empty-cells<br />

If you have empty cells in<br />

your table, then you can use<br />

the empty-cells property to<br />

specify whether or not their<br />

borders should be shown.<br />

Since browsers treat empty cells<br />

in different ways, if you want to<br />

explicitly show or hide borders<br />

on any empty cells then you<br />

should use this property.<br />

It can take one of three values:<br />

chapter-14/empty-cells.html<br />

<br />

<br />

1<br />

2<br />

<br />

<br />

3<br />

<br />

<br />

<br />

<strong>HTML</strong><br />

show<br />

This shows the borders of any<br />

empty cells.<br />

hide<br />

This hides the borders of any<br />

empty cells.<br />

inherit<br />

If you have one table nested<br />

inside another, the inherit<br />

value instructs the table cells to<br />

obey the rules of the containing<br />

table.<br />

In the first table on the left, you<br />

can see that the border of the<br />

empty cell is showing. In the<br />

second table, it is hidden.<br />

td {<br />

border: 1px solid #0088dd;<br />

padding: 15px;}<br />

table.one {<br />

empty-cells: show;}<br />

table.two {<br />

empty-cells: hide;}<br />

<strong>CSS</strong><br />

Result<br />

339 LISTS, TABLES AND FORMS

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!