(Reading time: 1 minute)

We can do this in two ways

  • HTML

Nested tables helps us in this. Check the following snippet

 
<table border="0" cellspacing="0" cellpadding="4">
<tr> <td>Apple</td>
     <td><table border="1" cellpadding="4">
        <tr><td>Ball</td></tr></table></td>
     <td>Cat</td> </tr>
</table> 

 

The second <table> with border will solve the problem. The code looks as follows in a browser:

 

Apple
Ball
Cat

 

  • CSS

This is the better way of fixing the same issue:

 
 
<table border="0" cellspacing="0" cellpadding="4"><tr>
  <td>Apple</td>
  <td><div style= "border: solid 0 #060; border-width:2px; padding:0.5ex">Ball</div></td>
  <td>Cat</td>
</tr></table>
 
 

 

The above snippet will show border only for the second cell and will look as follows in the browser:

 

Apple
Ball
Cat

Chillzee Tag Cloud

About Chillzee

Chillzee.com is an entrepreneurship portal.

The site provides informative topics on Organizational and Strategic needs.