HTML Table: Setting the size of the table in pixel

This entry is part 5 of 16 in the series HTML Table

If you have like to set the size of the table in pixel and will occupy the whole of your browser window, you can first check your desktop display settings.

displaysize

If you look at my laptop settings as shown on the above screen shot, you could see that it is set at 1366 x 768 pixels.  The first 1366 pixels is always the width.

<table border='1' width='1200px'>

Judging from my laptop settings, if you would like to set the width to full browser, you could probably set the width at about 1200 px as shown in the example below.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table border='1' width='1200px'>
    <tr>
        <td>ID</td>
        <td>artiste</td>
        <td>album</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
</table>

</body>
</html>

HTML Table: Specifying the size of a table

This entry is part 4 of 16 in the series HTML Table

By default, a table sizes itself to accommodate all of its cells, and each cell’s height and width changes to accomodate the largest entry in that row or column.

We can set the size of the table to 100%.  This forces the table to expand to fill up the browser window.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table border='1' width='100%'>
    <tr>
        <td>ID</td>
        <td>artiste</td>
        <td>album</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
</table>

</body>
</html>


Codecrawl.com-HTML Table

HTML: Controlling image size

This entry is part 32 of 34 in the series HTML

Image size is expressed in pixels.  If you want, you can specify only the width, the height will be resized proportionally.  Or you can specify the height.

The original image size below is 800 x 600.  We specify the height to 200px.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Image</title>
</head>
<body>

<img src='//codecrawl.com/code/images/ushuaia.jpg' height='200'>

</body>
</html>

We can also provide a fixed size to the image as in:

 

 

CSS: Specifying font size

This entry is part 11 of 26 in the series Basic CSS

There are few ways to specify the font size.  We look at 2 common methods.

We can specify the absolute size using pixels(px).  An average size for text is 10px.

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Font-size</title>
    <style type='text/css'>
        p {
            font-size: 16px;
            font-family: 'Arial', 'Helvetica', 'SANS-SERIF';
        }
    </style>
</head>
<body>

<p>Ushuaia is commonly regarded as the southernmost city in the world</p>

</body>
</html>

We can also specify relative sizing as a multiplier of the base font.  For example, 2em is two times the base size or 200%.

It is called an em because it is the width of the capital M character.

The example below uses 1.2em or 120% of the base font.

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Font-size</title>
    <style type='text/css'>
        p {
            font-size: 1.2em;
            font-family: 'Arial', 'Helvetica', 'SANS-SERIF';
        }
    </style>
</head>
<body>

<p>Ushuaia is commonly regarded as the southernmost city in the world</p>

</body>
</html>