I am new to HTML and Im working on a self made project and I have to use < table > and < fieldset > tags in my html files. I need to set the width and height properties to the tables like

<td width="100" height="200" > </td> <!-- something like that -->

But Im afraid of these reason because as the Monitor size changes with the computers some have large screens and some have small screens like notebook pc's. The table dimensions looks small for the big screen computers and big to the small screen computers.How do I manage them. How do I fit it to all types of screen sizes.

I mean when it goes to the right most part of the screen it jumps to the next line, if I use width property to the < td > tag?

and also using Padding like these is a bad idea ?

< span style="padding-left:100"> </span>

It looks exactly what i want on my browser. Does it look same on all types of monitor sizes? or does it vary? Is there any standard way to follow it?

I love your answers but answer these original question too, does it matter to the monitor sizes using width and height properties in < td > tag ?

  • 3
    I suggest you learning CSS. This is a great website for beginners.
    – Jose Faeti
    Commented Sep 6, 2011 at 7:03
  • Further to other answers recommending using CSS for this, I would also recommend always adding units to your measurements. "100" is ambiguous. Do you mean 100px or 100%? Add the unit for clarity and to avoid any potential browser misinterpretations. Commented Sep 6, 2011 at 8:12
  • 1
    default unit is px, pixels.. if you care about different monitor sizes, never use px. use em or some other relative unit.
    – Rommudoh
    Commented Sep 6, 2011 at 12:13

5 Answers 5


I suggest you to learn CSS. There are many resource available, this for example is a great site to start.

You should always use CSS to style your elements, possibly an external file containing all your rules.

The width and height attributes are now considered obsolete. You can obtain the same effect with a CSS rule. If you want to target only a particular table cell you can assign it a class like <td class="small"> for example:

#yourtable td.small {

For the padding, you should specify a class like <span class="indented"> and then create a CSS rule like this:

span.indented {

Now all your padding with this class will have a padding left of 100px.

As for screen resolutions, if you want to make a fixed size layout, keep in mind that the lowest common horizontal resolution nowadays is 1024px, you want to remove some pixels because of scrollbars, lateral bars, etc. so a standard safe size is considered to be 960px.

The best way to target different types of screen resolutions (and devices) is by having a liquid layout, a layout which adapt automatically on various resolutions. You can obtain this by using percentage values for your elements instead of fixed units for example.

  • 1
    you should use % or em as unit if you want to be independant of screen resolutions. don't forget to adjust the font size or it will look strange on big ones.
    – Rommudoh
    Commented Sep 6, 2011 at 12:15

A lot of sites are tailored for the lowest common denominator (well, perceived anyway). The lowest resolution that most present day monitors will go to is 1280x720. A lot of sites will be authored with a static with anywhere from 920 to 1000px wide as it doesn't look bad at higher resolutions (some will compensate with larger backgrounds to make it look a little prettier).

As for whether or not you should use width and height attributes directly in td tags, no, you shouldn't use them as the attributes are obsolete as of HTML5. Look at expressing layout using CSS.

Padding (such as padding-left) is not such a bad idea, but again, you'll want to look at putting that into an external style sheet and applying it to the specific element.

Really, I'd suggest taking a quick break from HTML learning and dip into CSS a bit and find out some of the recommended best practices there.

  • Could you give me some more interesting css tutorials which are easy to grasp and understand I mean the list of properties I found at w3schools but still I need more and more to learn
    – niko
    Commented Sep 6, 2011 at 7:00
  • w3schools is generally frowned upon by the development community due to the number of errors in their documents (so I wouldn't use it). Commented Sep 6, 2011 at 7:02
  • So what do i read any good tutorials please
    – niko
    Commented Sep 6, 2011 at 7:03
  • Looks like css3.info is littered with CSS tutorials (I haven't actually looked at tutorials in quite some time). Another way to learn is to check out how other people do it. Use developer tools in Firefox (Firebug) or Chrome/Chromium. You'll see links to .css files. Open those and take a look at how they're defined and then how they're used in the site's HTML. (sorry, didn't mean to submit my last comment without this accompanying it :)) Commented Sep 6, 2011 at 7:04

First of all, presentational attributes have been deprecated in HTML for quite a while now; you should use the style attribute instead, or better yet, proper CSS. The internet is full of resources about these, so I'm not going to elaborate.

Then; with web layouts, you have to make a fundamental choice before you get started: Fixed or fluid? A fixed layout uses hard-coded sizes for most things, usually specified in px or em. By contrast, fluid layout describes a layout strategy and relies on the user agent to apply it.

Fixed layout


  • Easier to make
  • Similar to print media design
  • Easier to support legacy browsers
  • Full control over placement of objects on page


  • Only works well on a resolution similar to the one it was designed for
  • Hard to automatically adjust to dynamic content
  • Doesn't scale well (e.g. for mobile devices)
  • Doesn't play nice with window resizing
  • May break when used in unexpected situations (e.g. user has different fonts installed, different screen dpi configuration, etc.)

Fluid layout


  • Scales well
  • Resolution independent
  • Automatically adjusts to dynamic content


  • Harder to get right
  • Limited support for legacy browsers
  • Some things won't work at all

Also, note that you can tackle the screen resolution / window size / mobile devices problem with @media queries: you make individual stylesheets for different window sizes, and have the user agent select the right ones for you.

  • +1 for the Pro's vs Con's of each. I like this better than the blanket snobbery of "Fluid is the ONLY way to go, noob!".
    – GHP
    Commented Sep 6, 2011 at 13:44

According to me, It is not a good practice for the perspective of responsiveness of the web page. When you will downgrade the size of the device it may not look perfect as of now. So, better you should use bootstrap classes for the same and you will get the perfect responsive table for all devices. You can use .table and .table-responsive class for the same.


You can use Mediaquery in css,using media query you can specify condition for displaying view in particular display size.

A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running.


body {
  background-color: yellow;

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;

In this example background-color is yellow if size of display is greater than 600px.

References for Media query:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp https://www.tutorialrepublic.com/css-tutorial/css3-media-queries.php

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.