HTML Layout - Useful Tips CREATED BY =JAY-AR SIMON SEBASTIAN

The attribute values are specified in pixels by default:

<img />

Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).

Basic Notes - Useful Tips

Note: If an HTML file contains ten images - eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully.

Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.

More Examples

Aligning images

How to align an image within the text.

Let the image float

How to let an image float to the left or right of a paragraph.

Make a hyperlink of an image

How to use an image as a link.

Create an image map

How to create an image map, with clickable regions. Each of the regions is a hyperlink.

HTML Image Tags TagDescription <img /> Defines an image <map> Defines an image-map <area /> Defines a clickable area inside an image-map

« Previous Next Chapter »

HTML Tables Apples 44% Bananas 23% Oranges 13% Other 10% Try it Yourself - Examples

Tables

How to create tables in an HTML document.

Table borders

How to specify different table borders.

(You can find more examples at the bottom of this page).

HTML Tables

Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Table Example <table>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

How the HTML code above looks in a browser:

row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.