PHP - Changing the font sizes of HTML output

**Banfa** · Mar 30 '06, 08:40 PM

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

The W3C Markup Validation Service

http://validator.w3.org

W3C's easy-to-use markup validation service, based on SGML and XML parsers.

**mart2006** · Mar 30 '06, 08:55 PM

You are a life saver! Thanks a million!

**mart2006** · Mar 31 '06, 10:27 AM

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.

**Banfa** · Mar 31 '06, 11:14 AM

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 ">

</table>

<table>

</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="outputTa ble">

</table>

<table class="outputTa ble">

</table>

<table>

</table>
[/html]

That is every id on a page must be unique, however classes can be used multiple times.

**mart2006** · Mar 31 '06, 11:28 AM

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>Displa y 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?

**Banfa** · Mar 31 '06, 11:29 AM

Not

.table

but

table

**mart2006** · Mar 31 '06, 11:31 AM

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!

**Banfa** · Mar 31 '06, 11:33 AM

You don't appear to be echoing

</table>

or is that just a posting omission

**mart2006** · Mar 31 '06, 11:36 AM

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?!

**Banfa** · Mar 31 '06, 11:42 AM

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).

**mart2006** · Mar 31 '06, 11:49 AM

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>Displa y 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>Test ing with a long string hhhhhhhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhhhhhh hhh</TD>
<TD>Test</TD>
<TD>Medium</TD>
<TD>Resolved</TD>
<TD>2</TD>
<TD>5</TD>
<TD>20060329</TD>

</TR></TABLE></BODY>
</HTML>
[/HTML]

**Banfa** · Mar 31 '06, 11:50 AM

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.

**mart2006** · Mar 31 '06, 11:57 AM

Changed but again no joy! Not to worry, I'll keep chipping away at it, thanks for the help though!

**Banfa** · Mar 31 '06, 12:01 PM

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.

PHP - Changing the font sizes of HTML output

PHP - Changing the font sizes of HTML output

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment