Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Table font size 2

Status
Not open for further replies.
birney29

birney29

Programmer
Oct 11, 2001
140
GB
im looking for a peice of code to change the font size of all the tables in a document. can anyone help please?!!

thanks

Kenny Kenneth Birney
User Interface Programmer
Scottish Police
 
Sort by date Sort by votes
you should be able to achieve this if you include the following in the <head> of your page...

<style>
TABLE { font-size: 10px; }
</style>

this will simply apply the style 'TABLE' to all <table> tags. this style will be inherited by all <tr> and <td> tags, providing there are no other styles applied to the <tr>'s and <td>'s.

hope this helps,

ss
 
Upvote 0 Downvote
could the font size be replaced with a variable that could be accessed and changed by using Javascript?

Thanks Kenneth Birney
User Interface Programmer
Scottish Police
 
Upvote 0 Downvote
use javascript:
<script>

function Change() {
var i;
var all_tables = document.all.tags(&quot;TABLE&quot;);
for (i=0;i<all_tables.length;i++)
{
all_tables.style.fontSize = &quot;10px&quot;; // your new size
}
}

</script>
 
Upvote 0 Downvote
sorry birney29, keep forgetting about that damn square brackets, that statement inside the for loop should say ..


all_tables#91;i#93;.style.fontSize = &quot;10px&quot;;
 
Upvote 0 Downvote
thanks a million mate! Kenneth Birney
User Interface Programmer
Scottish Police
 
Upvote 0 Downvote
To prevent that from happening, just put your code inside [ code ] and [ /code ] (without the spacing) tags. Tracy Dryden
tracy@bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
 
Upvote 0 Downvote
sorry tracy, do you mean All my code, or just the bit causing problem. could you give me an example please?

thanks Kenneth Birney
User Interface Programmer
Scottish Police
 
Upvote 0 Downvote
i still cant get it!! Kenneth Birney
User Interface Programmer
Scottish Police
 
Upvote 0 Downvote
Kenneth, do like you want.. [ code][ /code] tags tells to cfm script that the stuff included into them have NOT to be parsed as TGML..

quote:
~~~~~~~~~
A small minority of members, posting certain types of programming code, experience conflicts with TGML. If you are posting code, please check your output to be sure it outputs correctly. (Especially check the formatting around URLS and array subscripts). If your code does not look right, try surrounding the programming portion with the
Code:
tags to ignore TGML, or use the checkbox to disallow TGML from your post altogether.
~~~~~~~~~



look:
Victor
 
Upvote 0 Downvote
I think what tsdragon meant was if your posting code to the forumn, include it between the [ code ] tags. This way it will look the way you want it to.

Ex:
[ code]
your code here
[ /code]

your could modify sjravee's code to include a variable that would allow you to pass a size for the text into the Change() function:

Code: 
<script>

function Change(size) {
var i;
var all_tables = document.all.tags(&quot;TABLE&quot;);
for (i=0;i<all_tables.length;i++)
 {
  all_tables[i].style.fontSize = size + &quot;px&quot;; // your new size
  }
}

</script>

Then say, if you want a differnt font size on your tables, include this in your body tag:

Code: 
//in one page
<body onload=&quot;javascript:Change(10);&quot;>

//in another
<body onload=&quot;javascript:Change(12);&quot;>

At least, I'm fairly sure this will work!
 
Upvote 0 Downvote
is this the sort of thing? its still not working. a code example would be a greatly appriciated

function IncreaseDecrease(val)
{
if (val==1) { document.body.style.fontSize = initialSize++
textsize = val;
document.colorform.fontSize.value = val+initialSize;
Code: 
document.all.tags(&quot;TABLE&quot;).style.fontSize = val+initialsize
;
}
else { document.body.style.fontSize = initialSize--
textsize = val;
document.colorform.fontSize.value = val+initialSize;
}

}

thanks
Kenneth Birney
User Interface Programmer
Scottish Police
 
Upvote 0 Downvote
lol, three posts at once!

well, perhaps it would help if you outlined what it is your trying to achieve. Is this based on the users screen size or something like that?
 
Upvote 0 Downvote
thanks bently, didnt have a scooby doo (clue) what he was talking about. ill give your code a try Kenneth Birney
User Interface Programmer
Scottish Police
 
Upvote 0 Downvote
okay what im trying to do is this, i want the user to hit a button to increment the font size of all tables by 1. here is the function so far:

Code: 
function Change(size) {
var i;
var newSize = 12;
var all_tables = document.all.tags(&quot;TABLE&quot;);
for (i=0;i<all_tables.length;i++)
 {
 
  all_tables[i].style.fontSize++  
  }
}

please help!

thanks Kenneth Birney
User Interface Programmer
Scottish Police
 
Upvote 0 Downvote
its okay guys i got it!! thanks 4 the help Kenneth Birney
User Interface Programmer
Scottish Police
 
Upvote 0 Downvote
Would this be good? Let the users specify what font they want to look at it:

Code: 
<html>
<head>
	<title>Untitled</title>
<style>
TABLE { font-size: 10px; }
</style>
<script language=&quot;JavaScript&quot;>
function Change(size)
{
  var all_tables = document.getElementsByTagName(&quot;TABLE&quot;);
  for (i=0;i<all_tables.length;i++)
  {
   var tableObj = all_tables.item(i);
   tableObj.style.fontSize = size;
  }
}
</script>
</head>

<body>
<TABLE>
<tr><td>
TEXT
</td><tr>
</TABLE>

<TABLE>
<tr><td>
TEXT
</td><tr>
</TABLE>

<TABLE>
<tr><td>
TEXT
</td><tr>
</TABLE>

<form name=&quot;sizes&quot;>
<input name=&quot;size&quot; type=&quot;text&quot; value=&quot;10&quot;>
</form>
<a href=&quot;#&quot; onclick=&quot;javascript:Change(sizes.size.value);&quot;>Make me any size I want!</a>
</body>
</html>
[code]
[i]Just cut and paste, load to browser, and look[/i]
 
Upvote 0 Downvote
here u go : thanks for the help!

Code: 
function IncreaseDecrease(val)
{
	if (val==1) { document.body.style.fontSize = initialSize++ 
	textsize = val;
	document.colorform.fontSize.value = val+initialSize;
	initialTableSize ++;
	for (i=0;i<all_tables.length;i++)
 		{
 				all_tables[i].style.fontSize =  initialTableSize;  // your new size
  		}
}
	else { document.body.style.fontSize = initialSize--  
	textsize = val;
	document.colorform.fontSize.value = val+initialSize;
	initialTableSize --;
	for (i=0;i<all_tables.length;i++)
 		{
 				all_tables[i].style.fontSize =  initialTableSize;  // your new size
  		}
}

}
Kenneth Birney
User Interface Programmer
Scottish Police
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
712
spamjim
spamjim
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
840
spamjim
spamjim
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
151
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
164
PeDa
PeDa
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
136
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top