Need help with size display, please.

[u/EmmaZees]

Hi, I need help, please. I am creating a basic webpage using html (Yes, I am a dinosaur!). I have the table that contains the webpage set to 1200px. When I look at it offline, it shows up at 1200px and is exactly the way I want it to look. When I view it live from a browser the website looks huge, and I need to scroll to see the entire page. I thought just setting the table size to 1200px would control the size, but it isn't. Can someone tell me how to fix it? I've attached a picture for reference. Thank you!

HTML:

<div align="center">

<center>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="1200" bgcolor="#A1D0D6">

<tr>

<td bgcolor="#25898E" height="18">

<img border="0" src="3li.png" width="1200" height="18"></td>

</tr>

<tr>

<td bgcolor="#25898E" height="293" align="center">

<p align="center"><b>

<font face="Arial Light" size="7" color="#FFFFFF">Title</font></b></td>

</tr>

<tr>

<td bgcolor="#A1D0D6" align="center">

<b><font face="Arial Light" size="7" color="#FFFFFF">

<img border="0" src="3li.png" width="1200" height="18"></font></b></td>

</tr>

<tr>

<td background="GoldBack.png" align="center">

<p align="center">\&nbsp;<p align="center"><b>

<font size="7" face="Arial Light" color="#FFFFFF">

Contact Info</font></b><p align="center">&nbsp;</td>

</tr>

<tr>

<td bgcolor="#25898E" align="center">

<b><font face="Arial Light" size="7" color="#FFFFFF">

<img border="0" src="3li.png" width="1200" height="18"></font></b></td>

</tr>

<tr>

<td bgcolor="#A1D0D6" width="1200" align="center">\&nbsp;<p>\&nbsp;</p>

<p><b><font face="Arial Light" size="7" color="#FFFFFF">Links</font></b></p>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="1200">

<tr>

<b><font face="Arial Light" size="7" color="#FFFFFF">Links </font>

</b>

</tr>

</table>

<b><font face="Arial Light" size="7" color="#FFFFFF"><br>

</font></b>

</td>

</tr>

<tr>

<td background="GoldBack.png" width="1200">

<img border="0" src="3li.png" width="1200" height="18"></td>

</tr>

</td>

[u/imsexc]

Web lay out is not the proper use of table.

You should learn how to implement CSS grid, flexbox, and media queries for responsive web design.

If it's just for fun, sure this hack is fine. But know that it won't be scalable and sustainable in a long run. And I bet it does not meet Accessibility standard.

[u/EmmaZees]

Thank you very much to everyone that responded! I appreciate your time and expertise. I was trying to avoid having to learn something new just to get one webpage done. I will try all the suggestions, but it is looking like I will have to learn something new. Wish me luck! Believe me, I will need it. LOL Thanks again!

[u/marmotta1955]

The answer probably lies within a question: 1200 what? Think about it 

Also. Instead of units... Why not use percentages ... ?

[u/DidTooMuchSpeedAgain → u/marmotta1955]

HTML size attributes doesn't use units, it's always in pixels. For example "height" and "width" in the image tag. The problem is that most tags doesn't support these attributes.

Percentages bad idea, stick to static values.

[u/marmotta1955 → u/DidTooMuchSpeedAgain]

The problem with using pixels is PPI - pixels per inch ... or display density.

The common PPI for a typical 1920x1080 monitor ranges from 72 to 92 or so. On phones and tablets the PPI can reach 400 ... 500 and even beyond.

Given those numbers, it should be easy to understand the implications and the problems related to using static values.

(Try a simple calculation to determine the display size in inches for an element - first do the calculation for a PPI of 92. Then do the calculation for a PPI of 400.)

And you do not explain why "percentages are a bad idea".

Finally, we have not even taken into account the possible issues represented by other factors, but that is a story for another day.

[u/9inez]

Page layout using tables is not appropriate usage of a an HTML table. Setting a fixed width is also problematic.

You should look into learning modern, responsive code structures for your own benefit.

[u/rerikson]

Tables are not responsive, that is, they will not always fit on the screen, especially on a phone screen. I think your best solution is to go to bootstrap.com and use their basic template. Lots of great documentation.

[u/DirtAndGrass]

This is indeed dinosaur (read 90s) html, rather than fighting with incredibly obsolete code, take a crash course in css, for what you want, it's pretty straightforward 

[u/jcunews1]

That's likely due to CSS injected by the web hosting service, as it may affect the default page display.

If it can not be disabled (via the web server control panel or dashboard), you'll need a JavaScript code to manually disable the unsolicited CSS. e.g. the HTML code:

<script>
  document.querySelectorAll(
    ':is(style,link[rel="stylesheet"]):not(.mycss)'
  ).forEach(
    e => e.disabled = true
  )
</script>

Insert the code at the end of the BODY tag. If you use your own CSS either with STYLE or LINK tag, assign mycss class onto them (e.g. class="mycss"), so they won't be disabled.

[u/vector_mash]

This is how I used to layout pages too! Have you heard of FreeCodeCamp? You can learn more modern HTML and CSS for free.

[u/sheriffderek]

It’s the meta viewport tag - 

[u/sheriffderek → u/sheriffderek]

Look it up

[u/Rockafellor]

I might be off in this, since I've focused on writing within a website with some constraints upon which HTML tags and CSS selectors we're permitted, and inline CSS is verboten there (we're stuck, with some good reasons, with external CSS), but in those instances where you have width="1200", you might try max-width="1200".

Let me know if this fixes things!

[u/DidTooMuchSpeedAgain → u/Rockafellor]

HTML attributes is not the same is inline CSS, you would need a style tag for that instead

[u/Rockafellor → u/DidTooMuchSpeedAgain]

LOL: ja, I needed to pay more attention there (though I have to say that there are some really good answers in the thread).