Skip navigation
Currently Being Moderated

Table formatting - borders and spacing

Dec 11, 2012 5:07 PM

Tags: #table #formatting #table_style #table_lines #table_borders

I am working with tables and have come across three "issues":

 

1) On my "Resume" page, I would like to extend/continue the underline on the top most (header) row but after multiple attempts I can't seem to figure it out. Any thoughts?

2) Also on my "Resume" page, is is possible to increase the space between a bullet and the beginning of text? Then align the remaining text to the right of the bullet instead of next to it? Something like a "tab" in MS Word.

3) Within the first table, can I decrease the space between the two table data rows so there isn't such a large gap? I tried simply "pulling" down or up (like in Excel) but that didn't work.

 

site: http://www.sbaisden.com/resume.html

 

Thanks for any help!

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 11, 2012 8:21 PM   in reply to sbaisden12

    Why have you used 'tables'? I'd recommend you use pure CSS to do this.

     

    But, now that you already have used tables, if you want to achieve what you want to with the current code, here is what you can do:

     

    For the 1st question:

     

    Find:

     

    <tr class="td">

        <td colspan="2">EDUCATION</td>

        </tr>

     

    Change to:

     

    <tr class="td1">

        <td colspan="2">EDUCATION</td>

        </tr>

     

    Then duplicate class .td from CSS as .td1. Add one extra line:

     

    width: 120%;

     

    For 2nd question:

     

    If you had used an unordered list, you can specify in CSS the space you want between the bullet and text. Here, you've actually typed the bullet point • directly to your markup. The only way you can add space is to add a non-breaking space entity between the bullet and the text like this:

     

    <td>•  & nbsp ; <strong>Master of Urban Planning (MUP)</strong>, Academic Honors</td>

     

    & nbsp ;  will give you 1 space. Add how many ever you want as per your desire

     

    * It is actually with no space in between. If I remove spaces here, you cannot see the actual entity as the forum type editor converts that to a HTML entity. So remove the space between & and nbsp as well as nbsp and ;.

     

    For 3rd question:

     

    By the time I could get to it, I see you've changed your code already?

     

    -ST

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points