469,898 Members | 1,702 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,898 developers. It's quick & easy.

PHP - Changing the font sizes of HTML output

Hi,

This is probably really simple to most of you but I have a PHP based website that I want to change the font (of the outputted HTML) and I'm really struggling! Here is a snippet of my code:

Expand|Select|Wrap|Line Numbers
  1.  
  2. echo "<font face='arial' size='1'>";
  3.     echo "
  4.     <TABLE BORDER=1>
  5.     <TR>
  6.     <TH>Call Reference Number</TH>
  7.     <TH>Techncian</TH>
  8.     <TH>User</TH>
  9.     <TH>Call Description</TH>
  10.     <TH>Call Category</TH>
  11.     <TH>Call Priority</TH>
  12.     <TH>Call Resolution</TH>
  13.     <TH>Time Taken in hours</TH>
  14.     <TH>Time Taken in minutes</TH>
  15.     <TH>Date Logged</TH>
  16.     </TR>
  17.     </font>";
  18.  
  19. // Enter results in table
  20.  
  21. while ($row=mysql_fetch_array($sql_result)) {
  22.     $call_id=$row["Call_ID"];
  23.     $user=$row["User"];
  24.     $user_logged=$row["User_logged"];
  25.     $call_desc=$row["Call_Desc"];
  26.     $category=$row["Category"];
  27.     $priority=$row["Priority"];
  28.     $resolution=$row["Resolution"];
  29.     $time_hrs=stripslashes($row["Time_Hrs"]);
  30.     $time_mins=$row["Time_Mins"];
  31.     $date_logged=$row["Date_Logged"];
  32.  
  33.     echo "<font face='arial' size='1'>
  34.     <TR>
  35.     <TD><INPUT type=\"text\" readonly=\"readonly\" name =\"call_id\" value=\"$call_id\"></TD>
  36.     <TD>$user</TD>
  37.     <TD>$user_logged</TD>
  38.     <TD>$call_desc</TD>
  39.     <TD>$category</TD>
  40.     <TD>$priority</TD>
  41.     <TD>$resolution</TD>
  42.     <TD>$time_hrs</TD>
  43.     <TD>$time_mins</TD>
  44.     <TD>$date_logged</TD>
  45.     <TD>
  46.     <p align=center><INPUT type=\"submit\" value=\"Delete Call\"></p>
  47.     </TD>
  48.     </TR>
  49.     </font>"; 
  50.  
The font is changing to arial but I really can't get the font size to change. Can anyone help??

Thanks in advance.

Martin
Mar 30 '06 #1
15 40244
Banfa
9,065 Expert Mod 8TB
The problem you are having is because font size changes outside a table do not effect the font sizes inside the table cells. If you want to change the font sizes using the <font ... > tag you have to put one inside every table cell. This makes for very messy HTML.

However the good news is that there is now a better way all of the following tags are depricated

<font>
<basefont>
<b>
<i>

instead you should try using css (or the <strong> and <em> tags in place of <b> and <i>). With css you can applied a font size and style to all table cells with 1 small section of data at the top of you file. Try adding this to your output (I put in the <html>, <head> and <body> tags only so that you can tell where it should go in the file)

[html]
<html>
<head>
<style>
body {
font-size: 100%;
}

td, th {
font-size: 60%
}
<style>
</head>
<body>

All your normal output in here

</body>
</html>
[/html]

Setting body text size to 100% is just a trick to get all browsers to act in a more similar manor.

You can find out all you need to about CSS at www.w3schools.com

I also notice that in your html you open the font tag then the table tag but then you close the font tag before closing the table tag. This is bad form, tags should be nested with crossing them over like that.

You can get your HTML checked by using the validator provided by W3C located at

http://validator.w3.org
Mar 30 '06 #2
You are a life saver! Thanks a million!
Mar 30 '06 #3
One more quick question. I'm having a similar problem with setting table width and height, can I enter these properties in the same css file and if so how?

Thanks again, very much appreciated.
Mar 31 '06 #4
Banfa
9,065 Expert Mod 8TB
Certainly

[html]
<style>
table {
width: 720px;
height: 180px;
}
</style>
[/html]

That sets the height and width in pixels, you can also use
  • em - (related to current text height 1 em = 1 x current text height
  • mm cm pt - centimeters, millimeters or points sets a absolute size but don't because you don't know the size of everyones monitor
  • % - table size in relation to it's containing element as a precentage, however % heights don't always act in a manor that is useful

This will change the size of all tables on you page to change the height of a single table do this

[html]
...
<style>
#OutputTable {
width: 720px;
height: 180px;
}
</style>
...
<table id="OutputTable">
<!-- This table sized -->
</table>

<table>
<!-- This table NOT sized -->
</table>
[/html]

to change the size of 2 or more tables but not all of them

[html]
...
<style>
.outputTable {
width: 720px;
height: 180px;
}
</style>
...
<table class="outputTable">
<!-- This table sized -->
</table>

<table class="outputTable">
<!-- This table sized -->
</table>

<table>
<!-- This table NOT sized -->
</table>
[/html]


That is every id on a page must be unique, however classes can be used multiple times.
Mar 31 '06 #5
Thanks for the prompt response. I've tried entering the table attribute code in my css file but it seems to make little difference.

Here is my include:

[HTML]
<HTML>
<HEAD>
<TITLE>Display Calls</TITLE>
<link href="main.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
[/HTML]

Here is my css file

[HTML]
<style>
body {
font-size: 50%;
font-family: arial;
}

td, th {
font-size: 75%;
font-family: arial;
}

a:link{
color:#000040;
text-decoration: none;
}
a:visited{
color:#000040;
text-decoration: none;
}
a:hover{
color:#000040;
text-decoration: underline;
}
a:active{
color:#000040;
text-decoration: none;
}
table {
width: 72px;
height: 180px;
}
</style>
[/HTML]

And finally the start of my table (the rest if it is simply inserting php variables into the table cells.

[HTML]
echo "
<table border=1>
<TR>
<TH>Call ID</TH>
<TH>Techncian</TH>
<TH>User</TH>
<TH>Call Description</TH>
<TH>Call Category</TH>
<TH>Call Priority</TH>
<TH>Call Resolution</TH>
<TH>Time Taken in hours</TH>
<TH>Time Taken in minutes</TH>
<TH>Date Logged</TH>
</TR>";
[/HTML]

Any idea why this is not taking effect?
Mar 31 '06 #6
Banfa
9,065 Expert Mod 8TB
Not

.table

but

table
Mar 31 '06 #7
Sorry that is something I added after in an attempt to make it work (thought Id come across it somewhere) but it clearly didnt have any effect!
Mar 31 '06 #8
Banfa
9,065 Expert Mod 8TB
You don't appear to be echoing

</table>

or is that just a posting omission
Mar 31 '06 #9
Yep that is just an omission.

Perhaps I should explain that the reason I want to do this is that when I enter data dynamically into the table, the table is being automatically stretched out meaning the user has to scroll from left to right in order to read the contents. Instead I want the table to stay at a fixed width but increase in height to enable all of the contents to be entered.

Hope this makes sense?!
Mar 31 '06 #10
Banfa
9,065 Expert Mod 8TB
In that case I think possibly what you need to do is individually set column widths for each column, add a width attribute to each th tag.

However it would be easier to comment if you could either post a link to the page or post a complete page (as obtain from a view source in your browser).
Mar 31 '06 #11
I actually have tried adding <th width=40> but again it doesnt seem to take affect. Here is my source code:

[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Display Call</TITLE>
<link href="main.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>

<table border=1>
<TR>
<TH>Call ID</TH>
<TH>Techncian</TH>
<TH>User</TH>
<TH>Call Description</TH>
<TH>Call Category</TH>
<TH>Call Priority</TH>
<TH>Call Resolution</TH>
<TH>Time Taken in hours</TH>
<TH>Time Taken in minutes</TH>
<TH>Date Logged</TH>
</TR>
<TR>
<TD width="900">1</TD>
<TD>doma1002</TD>
<TD>Test User</TD>
<TD width=1% height=100>Testing with a long string hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</TD>
<TD>Test</TD>
<TD>Medium</TD>
<TD>Resolved</TD>
<TD>2</TD>
<TD>5</TD>
<TD>20060329</TD>

</TR></TABLE></BODY>
</HTML>
[/HTML]
Mar 31 '06 #12
Banfa
9,065 Expert Mod 8TB
Oops, just spotted another error

you do not need the <style>...</style> tags in your css file, you only need those if you put your css into the <head> of your html file.
Mar 31 '06 #13
Changed but again no joy! Not to worry, I'll keep chipping away at it, thanks for the help though!
Mar 31 '06 #14
Banfa
9,065 Expert Mod 8TB
Yeah I realised that after I tried it but the style tags are still wrong there so leave them out.

The HTML you posted seems to work ok for me with the CSS you posted. You have set the table width to 72px which is only 10% of the width of the screen, however the table is being sized to it's minimum width.

The minimum width of the table is calculated from the minimum width of all the cells. The minimum width of the cell is dependent on the longest single word as line breaks can only be inserted where there is white space.

I'm not quite clear on the layout you are after since the layout achieved looks quite reasonable to me.
Mar 31 '06 #15
I think I may have hit on the problem. It would appear that testing with data such as ssssssssssssssssssssssssssssssssssssssssssssssssss sssssssssssssssssssssssssssssssssssssssssssss isnt the best idea, when I break this up, i.e. sss sss sss sss, the width of the table reduces and new lines for each word are inserted.

Would this make sense to you!? Anyway problem resolved, I'll try not to be so naive in the future!

P.S
It appears you have picked up on this in your last message!
Mar 31 '06 #16

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Cengiz Ulku | last post: by
55 posts views Thread by Haines Brown | last post: by
115 posts views Thread by J | last post: by
8 posts views Thread by François de Dardel | last post: by
98 posts views Thread by Pamel | last post: by
15 posts views Thread by chart43 | last post: by
60 posts views Thread by deko | last post: by
1 post views Thread by Randy Shore | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.