HTML: basic geekyness – Part 3


Time for some not so basic html…

In case you don’t really know how html works or if you’re not completely following what this guide is about. Then please read the first 2 guides before continuing…
Part 1: https://sharpsblogorama.wordpress.com/2010/11/25/html-basic-geekyness-–-part-1/
Part 2: https://sharpsblogorama.wordpress.com/2010/11/25/html-basic-geekyness-–-part-2/

If you will start to design and create the actual look of a website you will eventually come up with wome sort of an image that will be “your website”.

For example, you can create a site interface with photoshop. Once the background is as you prefer it to be you can slice this image. You will literally cut it into pieces. When you save these set of slices “for HTML” you’ll notice that photoshop has created an html file that brings all of the slices together so you have 1 big background again. Photoshop gets all the slices in the correct spot by putting them together in a table.
This object can be used for a lot of things like organising some data, putting certain objects in a particular location, order objects, …

Before showing you how the code works, it is important that you understand how a table is build. And truth being is said, it is very similar to an excel speadsheet.
A table has rows and columns, these rows are filled with cells. The actual cells contain your data.
You cannot define an object such as “column” in HTML, if you want to add a column to a certain row in HTML you will need to do this by adding a cell.

As a result, not every row needs to have an equal amount of columns.

How does the code look like. Well, it’s a lot easier than it might look like in the beginning.
The code for a table goes, like most of the objects, within the body tags.

The containertag which indicates a table is ..<TABLE>
Within this tag you can define 3 other tags

<TR>: Table row, this adds a new row to your table
<TH>: Table header, this adds a header to a column
<TD>: Table data, this adds a cell to your table
Let’s create a basic table now with 2 rows, where 1 row returns the heading and 1 row returns data.

Within the body tag the code for the table looks like this:
<TABLE border=”1″>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>

The result will look like this:

And my code looks like this:

Note that you have to put all of the containers which mark a row, heading or cell within the table tags.
For each row that you create you will need to open and close new tags each time.
So if you want 3 lines you will need to put <tr></tr> 3 times.
Within the TR tags go either TH or TD tags.
Same rule here. Want 4 columns? You will need to add 4 times either TH or TD.

Also notice the border=”1″ option I used. This is just to show the black/greyish frame around the table. If you put 0 it won’t be shown.
This is a very basic table. There are however more options that you can use. Which I won’t described (I’m a bad person, I know) as well because it is simply too much. Google is your friend, or just post a comment with your question :).

For the table fanatics, yes you can actually nest tables. In case you want to do this for some strange reason (table fetish?), here’s a little example.
The code looks like this (yes very confusing, I know).
<HTML>
<HEAD>
<TITLE>Sharp’s Tables tutorial</TITLE>
</HEAD>
<BODY>
<TABLE border=”1″>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>
<table border=”1″>
<tr>
<th>Nest Heading 1</th>
<th>Next Heading 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
</tr>
</table>
</BODY>
</HTML>

The result:
My code looks like this:
Hard? Not at all!

One more thing I would like to show you. Forms…

But I’ll show you that in the next issue of geeks ‘R us

Advertisements

4 thoughts on “HTML: basic geekyness – Part 3

  1. Pingback: HTML: basic geekyness – Part 4 « Tech-o-rama

  2. Pingback: CSS: The basics part 1 « Tech-o-rama

  3. Pingback: Advanced webcoding: Javascript – Part 1 « Tech-o-rama

  4. Pingback: Advanced webcoding: PHP – Part 1 « Tech-o-rama

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: