8 Replies - 514 Views - Last Post: 18 June 2012 - 04:57 PM

#1 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Formatting a table

Posted 18 June 2012 - 04:02 PM

Hi guys. Just trying to work out why the following applies now formatting to my table rows and looking for another opinion on this
       
<tr>
    <td>business class flights to <b>Abu Dhabi</b><span>from <b>1185</b></span></td>
    <td>business class flights to <b>Miami</b><span>from <b>1365</b></span></td>
</tr>



I am basically trying to recreate the following
Posted Image

I thought a table would be the best way to achieve this, but what I am trying above is to get the text to appear like it does in the image.

Cheers

Is This A Good Question/Topic? 0
  • +

Replies To: Formatting a table

#2 mccabec123  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 233
  • Joined: 03-March 11

Re: Formatting a table

Posted 18 June 2012 - 04:09 PM

How close have you got it so far?
Was This Post Helpful? 0
  • +
  • -

#3 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Re: Formatting a table

Posted 18 June 2012 - 04:13 PM

Well the bold and span tags dont work directly on the table. As for the rest, I have changed it to
<table id="price-table">
        <tr>
            <td class="name">business class flights to <b>Abu Dhabi</b><span>from <b>1185</b></span></td>
        	<td class="name2">business class flights to <b>Miami</b><span>from <b>1365</b></span></td>
        </tr>
        <tr>
        	<td class="name">business class flights to <b>Adelaide</b><span>from <b>2120</b></span></td>
        	<td class="name2">business class flights to <b>Moscow</b><span>from <b>671</b></span></td>
        </tr>
</table>


#price-table{
	margin-left:-10px;
}

.name{
	border:10px solid white;
	background-color:#e9e9e9;
	height:5px;
}
.name2{
	border:10px solid white;
	background-color:#e9e9e9;
	height:5px;
}



And in the css, the height attribute doesnt have any effect.

Nick
Was This Post Helpful? 0
  • +
  • -

#4 mccabec123  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 233
  • Joined: 03-March 11

Re: Formatting a table

Posted 18 June 2012 - 04:18 PM

You'll need to add cellpadding, or a margin on the 'name' class to create the spacing between the cells. Remove the span tags, they're not needed. Can you post a screenshot of how it currently looks?
Was This Post Helpful? 0
  • +
  • -

#5 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Re: Formatting a table

Posted 18 June 2012 - 04:23 PM

Currently it looks like
Posted Image

The problems I have at the moment is the cells being to high, I cant seem to make them smaller. Also, no formatting is applied to the text inside the cells. I added the span to try and get the text "from 1878" to the right hand side of the cell. Even the bold tag doesnt seem to work.
Was This Post Helpful? 0
  • +
  • -

#6 mccabec123  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 233
  • Joined: 03-March 11

Re: Formatting a table

Posted 18 June 2012 - 04:27 PM

What browser are you using?
Was This Post Helpful? 0
  • +
  • -

#7 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Re: Formatting a table

Posted 18 June 2012 - 04:31 PM

Firefox, but I test on several. I have managed to sort out the height and changed it to the following to be more efficient
th, td {
    padding: 0px;
    border:10px solid white;
    background-color:#e9e9e9;
}


The only problem now is the text inside the cell.

Nick
Was This Post Helpful? 0
  • +
  • -

#8 mccabec123  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 233
  • Joined: 03-March 11

Re: Formatting a table

Posted 18 June 2012 - 04:42 PM

The text is bold on my browser :S Have you shift refreshed your browser to clear the cache? As your browser caches CSS and and images etc, so if something is changed in the CSS it is not automatically updated.

Here's how it looks on mines:

http://screencast.com/t/LAJPf8XlNk

This post has been edited by mccabec123: 18 June 2012 - 04:42 PM

Was This Post Helpful? 1
  • +
  • -

#9 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Re: Formatting a table

Posted 18 June 2012 - 04:57 PM

Ahh, it was being overwritten by a style somewhere else, which is probably why the height isnt working aswell.

Cheers for the help
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1