Photoshop Question posted in
The official user guide can be found here.

table data has lot of space at the bottom in html – Photoshop

I am trying to decrease the bottom on a table row. But it’s not decreasing away. I have huge fonts, the only way to clear the space below is to decrease the font sizes but that again does create equally proportionate space below. I have tried defining the height in the <tr> and <td> (inline), but they don’t respond to smaller size only bigger than what it is now. Here’s my code :

<tr>        
 <td colspan="3" class="style1" height="250px">            
     <p id="two"> 2 </p> 
     <p id="zero"> 0 </p> 
     <p id="one"> 1 </p> 
     <p id="six"> 6 </p>
     <p id="wishes"> Best wishes </p>
     <p id="sender"> From Steve </p>         
 </td>

This is a table head

<table style="padding: 2em;" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#455a64" width="100%"></table>

Fonts are bold 150px and gradually smaller.
At this point I am thinking about converting it to image in photoshop and put it in the html.

This how my problem looks like

enter image description here

JSFiddle

https://jsfiddle.net/milan_light/505Lougg/

Tags:

2

Answers


  1. 0

    first,I think you maybe can use ‘padding’ and ‘margin’ to replace your table’s ‘cellpadding’ and ‘cellspacing’,and you can reset the css,then set your table css.
    It’s a good way,not affected by the style of it;

    Login or Signup to reply.
  2. 0

    Here’s an example with the margin removed from the p tags and using span tags for the numbers so they don’t break onto new lines.

    HTML:

    <table class="table1">
    <tr>
        <td colspan="3" class="style1">
        <span id="two"> 2 </span>
        <span id="zero"> 0 </span>
        <span id="one"> 1 </span> 
        <span id="six"> 6 </span>
        <p id="wishes"> Best wishes </p>
        <p id="sender"> From Steve </p>
        </td>
    </tr>
</table>

    CSS:

    .table1 {
  width: 100%;
}

.style1 {
  padding: 2em;
  background: #455a64;
}

#wishes, #sender {
  margin: 0px;
}

    And here it is on JSFiddle https://jsfiddle.net/mikhailjan/qcvsthrm/2/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search