Scribd
Upload
17 views2 pages

202005171817289765Priyanka-WT-HTML Basics-5

This document discusses using tables for layout in HTML documents. It recommends using relative widths for tables so that content is readable at different screen resolutions without horizontal scrolling. It then provides an example of a simple HTML page that uses a table for layout with two columns. It includes instructions for readers to create their own basic HTML page with common elements like links, images, and lists using a similar table-based layout.

Uploaded by

adım soyadım
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views2 pages

202005171817289765Priyanka-WT-HTML Basics-5

This document discusses using tables for layout in HTML documents. It recommends using relative widths for tables so that content is readable at different screen resolutions without horizontal scrolling. It then provides an example of a simple HTML page that uses a table for layout with two columns. It includes instructions for readers to create their own basic HTML page with common elements like links, images, and lists using a similar table-based layout.

Uploaded by

adım soyadım
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

There are arguments in favor of giving your tables a relative width because such table widths yield

pages that work regardless of the visitor's screen resolution. For example, a table width of 100% will
always span the entire width of the browser window whether the visitor has a 800x600 display or a
1024x768 display (etc). Your visitor never needs to scroll horizontally to read your page, something
that is regarded by most people as being very annoying.

HTML Layout - Using Tables

One very common practice with HTML, is to An HTML <table> is used to divide a part of
use HTML tables to format the layout of an this Web page into two columns.
HTML page. The trick is to use a table without borders,
A part of this page is formatted with two and maybe a little extra cell-padding.
columns. As you can see on this page, there No matter how much text you add to this
is a left column and a right column. page, it will stay inside its column borders.
This text is displayed in the left column.

Try It Out!
Let's put everything you've learned together to create a simple page. Open your text editor and type
the following text:

<html>
<head>
<title>My First Web Page </title>
</head>
<body>
<table width="90%" cellpadding="5" cellspacing="0" >
<tr bgcolor="#EDDD9E">
<td width="200" valign="top"><img src="graphics/contact.gif" width="100"
height="100"></td>
<td valign="top"><h1 align="right">Janet Doeson</h1>
<h3 align="right">Technical Specialist</h3></td>
</tr>
<tr>
<td width="200">
<h3>Menu</h3>
<ul>
<li><a href="home.html">Home</a></li>
<li> <a href="faq.html">FAQ</a></li>
<li> <a href="contact.html">Contact</a></li>
<li> <a href="http://www.austincc.edu">Links</a> </li>
</ul></td>
<td valign="top"><h2 align="center">Welcome!</h2>
<p>Welcome to my first webpage. I created this webpage without the assistance of a
webpage editor. Just my little text editor and a keen understanding of html.</p>
<p>Look around. Notice I'm able to use paragraphs, lists and headings. You may not
be able to tell, but the layout is done with a table. I'm very clever. </p>
<blockquote>
<p>I always wanted to be somebody, but now I realize I should have been more
specific.</p>
<cite>Lily Tomlin </cite> </blockquote> </td>
</tr>
</table>
<hr width="90%" align="left">
<address>
Janet Doeson<br>
Technical Specialist<br>
512.555.5555
</address>
<p>Contact me at <a href="mailto:[email protected]">[email protected]</a> </p>
</body>
</html>

Save your page as mytable2.html and view it in your browser. To see how your page should look
visit this web page: http://profdevtrain.austincc.edu/html/mytable2.html

I have indented some of the HTML code in the above example. Indenting the code can make your
HTML document easier to read.

Create Your Own Page

It’s time to create your own page. Use your text editor to create a page which contains the following:

• the required HTML page codes


• link to another web page
• an email link
• a picture/graphic
• a list of information

Save the file as xyhtml_basics.html where xy is your initials. Email the file to [email protected].

You might also like