Solved

How do I increase the column width?

Posted on 2008-10-18
8
169 Views
Last Modified: 2012-05-05
I would like to extend the width of the columns.  How do I do that?

newbieweb

<table>
<tr>
<td>Phone</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$29.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
<tr>
<td>Monthly Fee</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$35.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
</table>
0
Comment
Question by:newbieweb
  • 4
  • 3
8 Comments
 

Author Comment

by:newbieweb
ID: 22750670
And how do I insert a blank line in the table?

<table>
<tr>
<td>Phone</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$29.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
// insert blank line here, betweenthe rows
<tr>
<td>Monthly Fee</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$35.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
</table>
0
 

Assisted Solution

by:samg3
samg3 earned 150 total points
ID: 22750723
Here is one way of adjusting the width and inserting a blank row. The parameters and code for the extra table row are in bold. Let me know if this helps you out.

<table width="300">
<tr>
<td width="100">Phone</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$29.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
<tr>
<td width="100">&nbsp;</td><td></td><td></td></tr>
<tr>
<td width="100">Monthly Fee</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$35.95</td>
<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>
</tr>
</table>
0
 

Author Comment

by:newbieweb
ID: 22750746
Cool!

How do I pad the whole thing with spaces on the left?  Or shift the whole table towards the center?

And how do I insert a blank line?

0
 
LVL 8

Expert Comment

by:fcardinaux
ID: 22750875
Here is how to center your table horizontally and insert a blank line
<table style="position: absolute; left: 50%; margin-left: -150px; width: 300px; text-align: left">

<tr>

<td width="100">Phone</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$29.95</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>

</tr>

<tr>

<td colspan="3">&nbsp;</td><!-- This is the blank line, and 3 is the number of columns of your table -->

</tr>

<tr>

<td width="100">Monthly Fee</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$35.95</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>

</tr>

</table>

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 8

Expert Comment

by:fcardinaux
ID: 22750902
And this is the same table shifted 100px downwards.

Note also that I've replaced "position: absolute" by "position: relative". Depending on your situation, you should do the same (http://webdesign.about.com/od/advancedcss/a/aa061307.htm).
<table style="position: relative; left: 50%; top: 100px; margin-left: -150px; width: 300px; text-align: left">

<tr>

<td width="100">Phone</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$29.95</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>

</tr>

<tr>

<td colspan="3">&nbsp;</td><!-- This is the blank line, and 3 is the number of columns of your table -->

</tr>

<tr>

<td width="100">Monthly Fee</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$35.95</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>

</tr>

</table>

Open in new window

0
 

Author Comment

by:newbieweb
ID: 22750956
I do not have your code working yet.  Here's the way it loked with this kind of definition:

<table width="600">


Then second picture uses this kind of definition:

<table style="position: relative; left: 50%; top: 100px; margin-left: -150px; width: 600px; text-align: left">

and looks like in the second picture:

Can you suggest what I am doing wrong?  I just want the table, which looks good, to shift the right a bit.

UnShiftedTable.JPG
ShiftedTable.JPG
0
 
LVL 8

Expert Comment

by:fcardinaux
ID: 22750974
This code should do what you want:

Note that in my previous code, the table is centered if the margin-left value is half the table width. So if you want a 600px wide table, you must change the margin-left value to 300px.
<table style="left: 100px; width: 600px; text-align: left">

<tr>

<td width="100">Phone</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$29.95</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>

</tr>

<tr>

<td colspan="3">&nbsp;</td><!-- This is the blank line, and 3 is the number of columns of your table -->

</tr>

<tr>

<td width="100">Monthly Fee</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$35.95</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>

</tr>

</table>

Open in new window

0
 
LVL 8

Accepted Solution

by:
fcardinaux earned 350 total points
ID: 22750981
Sorry, I forgot the "position: relative" style value
<table style="position: relative; left: 100px; width: 600px; text-align: left">

<tr>

<td width="100">Phone</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$29.95</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>

</tr>

<tr>

<td colspan="3">&nbsp;</td><!-- This is the blank line, and 3 is the number of columns of your table -->

</tr>

<tr>

<td width="100">Monthly Fee</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$35.95</td>

<td style="text-align: right; font-family: Courier New,Courier,mono;">$99.95</td>

</tr>

</table>

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now