Solved

How do I increase the column width?

Posted on 2008-10-18
8
167 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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

759 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

19 Experts available now in Live!

Get 1:1 Help Now