Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Download
Standard view
Full view
of .
Look up keyword
Like this
0Activity
0 of .
Results for:
No results containing your search query
P. 1
Creating Your Own Web Page is Easy - A Tutorial Part 2

Creating Your Own Web Page is Easy - A Tutorial Part 2

Ratings: (0)|Views: 1|Likes:
Published by pass9090

More info:

Published by: pass9090 on Mar 21, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

03/21/2012

pdf

text

original

 
Title:Creating Your Own Web Page is Easy - A Tutorial (Part 2) Word Count:1715 Summary:Now, Let's continue with Part 2. We will discuss the following here: Creating tablesUsing CSS boxes as webpage layout Here's how: Keywords:website building, web page making, creating a web page, make web page, how to create web page, how todesign web page, how to make web page Article Body:Now, Let's continue with Part 2. We will discuss the following here: Creating tablesUsing CSS boxes as webpage layout Here's how: <h1>Creating tables</h1> Tables are very useful in the presentation of data. The following are the html tags to be used to create a basictable: Single-column table: &lt;table width="400" border="1" cellspacing="2" cellpadding="4"&gt;&lt;tr&gt;&lt;td&gt;row 1 data&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;row 2 data&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; Type the above in your mywebpage.html within the body tags, save and refresh your browser. That's the
 
table on the web. Referring to the above html codes, width refers to the width of the whole table (you mayalso use pixel here like "800"), border is the outside line or outline of the table, cellspacing is the spacebetween the cells, cells are the area where the data are located, cellpadding is the space between border andcells. You may change the values of these table attributes or properties based on your preference orrequirement. Though the above table html codes are still working, W3C.org requires the table properties or attributes bedefined in the style sheets or CSS. Using CSS, the above table properties could be presented as follows: Within style tags in the head:.type1 {width: 400px;padding: 4px;margin: 2px;} .border {border: 1px solid #000;} Then, within the body tags: &lt;table class="type1 border"&gt;&lt;tr&gt;&lt;td&gt;row 1 data&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;row 2 data&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; Looking at the codes, "type1" is preceded by dot (.), meaning it is a class selector. For the next type of tableproperties or attributes, you may label it as type2, then type3 and so on or with other names you prefer."border" is also a class selector and "border: 1px solid #000" is the thickness (1px), border type (solid) andcolor (#00f) of the border. There are more discussions of CSS in "Creating CSS boxes as web page layout"and in "Using CSS in styling your web pages" If you want to try the above, then type the codes within the style and body tags as noted, save it and refreshyour browser. It must be the same as the first one. Now, let's make a 2-column or multi-column table: &lt;table width="400" border="1" cellspacing="2" cellpadding="4"&gt;&lt;tr&gt;&lt;td&gt;row 1 data 1&lt;/td&gt;&lt;td&gt;row 1 data 2&lt;/td&gt;&lt;/tr&gt;
 
&lt;tr&gt;&lt;td&gt;row 2 data 1&lt;/td&gt;&lt;td&gt;row 2 data 2&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; Type the above in your mywebpage.html within the body tags, save and refresh your browser. That's the 2-column table on the web. To add a column, just insert &lt;td&gt;&lt;/td&gt; after &lt;/td&gt;. 1&lt;td&gt;&lt;/td&gt; is one column, 1 &lt;tr&gt;&lt;/tr&gt; is one row and 1 &lt;table&gt;&lt;/table&gt; isone table. Now, lets make a table with 1 main heading and 3 subheadings: &lt;table width="400" border="1" cellspacing="2" cellpadding="4"&gt;&lt;tr&gt;&lt;td colspan="3"&gt;Main Heading&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Subheading 1&lt;/td&gt;&lt;td&gt;Subheading 2&lt;/td&gt;&lt;td&gt;Subheading 3&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;row 1 data 1&lt;/td&gt;&lt;td&gt;row 1 data 2&lt;/td&gt;&lt;td&gt;row 1 data 3&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;row 2 data 1&lt;/td&gt;&lt;td&gt;row 2 data 2&lt;/td&gt;&lt;td&gt;row 2 data 3&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; Type the above in your mywebpage.html within the body tags, save and refresh your browser. See? Yes, justuse colspan to merge the columns. To merge 2 columns, use colspan="2" and for 3 columns, usecolspan="3" and so on. If you want to merge rows, use rowspan instead of colspan. See this example: &lt;table width="400" border="1" cellspacing="2" cellpadding="4"&gt;&lt;tr&gt;&lt;td rowspan="2"&gt;merge row data&lt;/td&gt;&lt;td&gt;row 1 data 2&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;row 2 data 2&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; Now, type the above in your mywebpage.html within the body tags, save and refresh your browser. Now,you see that 2 rows in your first column were merged. Try creating your own table using different values to familiarize yourself in manipulating tables. 

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->