Logo
Login
Welcome, Guest.
Login | Register

Website Design - Part 4

E Avatar By @HullBreachPremium64
POSTED: 05 Dec 2009 18:42
CATEGORY: Educational
FEATURED: Yes (@HullBreachPremium64)
(Go to comments)
This is the 4th part in a series on Web design and development. Today's lesson will focus on tables. Since tables can get very complex, the remainder of coverage will be in a future article. Anyways, here we go!

There are several HTML tags for tables, none of which are self-closing. Tags will be encapsulated inside each other to form complex tables.

The HTML tag for a table is <table>. Tables can have 4 main section types to them. Those are <caption>, <thead>, <tbody>, and <tfoot>. <tbody> is the most common of these, so it will be the focus for this lessen. From what we have so far, here is how an empty table would look:

<html>
...
<body>
...
<table>
<tbody>
...
</tbody>
</table>
...
</body>
</html>

Tables are defined in row-by-column order, using the <tr> and <td> tags. A special type of header <td> tag exists called <th>. Many browsers will just make <th> a bold and center-aligned <td>.

Let's make a simple table with the times table of 1x1 to 3x3. Start with the shell of the table, again:

<table>
<tbody>
...
</tbody>
</table>

Now let's put in the first row:

<table>
<tbody>
<tr>
<th>X</th><th>1</th><th>2</th><th>3</th>
</tr>
...
</tbody>
</table>

Did you follow that so far? We're creating a table which has the first row showing that it's a "X" (times) table, and it's listing on set of multiplicands.

Now we need to create 3 more rows, on for each of the other multiplicands and their products.

...
<tr>
<th>1</th><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<th>2</th><td>2</td><td>4</td><td>6</td>
</tr>
<tr>
<th>3</th><td>3</td><td>6</td><td>9</td>
</tr>
...

In effect, this is how the table will appear:

X 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9

I'll give a little time for all this to sink in before moving onto the next lesson, which will delve into advanced table structures.
+11 -1
Avatar Avatar Avatar Avatar Avatar Avatar Avatar Avatar Avatar Avatar

Comments

Avatar AtexBg
14 Sep 2024 21:40
Does someone read this in 2024 ?
Avatar aidansocool
10 Jan 2020 19:08
2020
Avatar Dsi gamer
24 Feb 2019 04:08
who read this in 2019 like for yes comment for no

Avatar AtexBg
14 Sep 2024 21:41
In reply to Dsi gamer
No, i'm in the future
Avatar Tomthesk8r
14 Sep 2017 03:47
First ever featured blog
Avatar Finrod
05 Sep 2015 21:25
i am frm the future and this is the first featured blog and its knda lame :/
Avatar AtexBg
14 Sep 2024 21:41
In reply to Finrod
I'm also from the future
Avatar spideer
24 Jul 2014 01:56
Cool
Avatar LaZerWoLF
25 Jun 2013 11:27
Wow.. First featured blog!! ;D
Avatar Wulvezz4Ever
31 Aug 2012 05:37
Curiousity tamed.
This was the first featured blog. :'3
Avatar matthp14
07 Jul 2012 06:24
helpful, but does it work on this site?
Avatar spideer
24 Jul 2014 01:56
In reply to matthp14
No
Avatar snaker556
19 May 2012 20:23
..0-o
Avatar matthp14
30 Dec 2011 05:07
I really don't get any of the website design stuff.
Avatar Mr.Bond
28 Nov 2011 12:42
FIRST FEATURED BLOG













Avatar SHADOWSTRIKE
28 Apr 2010 20:17
Good job! Hey Danny, hows your family doing?
Avatar SlickShady333
07 Dec 2009 17:15
smalls, how u made yer banner?
Avatar AngelVamp
07 Dec 2009 14:46
<B>Plz Work</B>
Avatar KILL3RTACO
06 Dec 2009 16:26
< b>plz work...< b/>
Avatar StuffMan
06 Dec 2009 14:52
Cool, I might be able to use this info on DSi-Pod somehow!
Avatar HullBreach
06 Dec 2009 08:06
I will delve into JavaScript after finishing tables and a few other HTML tags, followed by simple style sheets. Have I even covered the IMG tag yet? I'll have to look through past articles to see. That's a very important one.

For those who already write HTML, you may notice that I'm not putting many attributes inside the tags in the lessons. I'm holding most of that until later since stylesheets cover the majority of them nowadays.
Avatar Fallguy
05 Dec 2009 20:16
making any javascript tutorials? i need to strengthen there.
Avatar Ronmaster
05 Dec 2009 19:37
we have been doing this in homeroom at school. By the way we r in 7th grade
Avatar Timodachi
05 Dec 2009 19:30
Yet again, Easy and Great for Amateurs like me ^_^ Great help Hull, thank you!
Avatar smalls
05 Dec 2009 18:58
Tables can be very tricky, I haven't even been able to master them even after all the websites I've done.
Home
Nintendo 3DS is ™ Nintendo Co. Ltd. This website is ©2009-2025 HullBreach Studios. All rights reserved.