"Back to Basics with tables for them kiddies learning HTML" HTML tables is a method of organizing and displaying tabular data in an organized manner on the internet. That is easily readable by visitors, and code for designers/developer in the back. Making them easy to customize and manipulate to suit any needs.But seriously tables should only be used for displaying data and not layout designs.

Table Example

colum 1	column 2	column3
#1	#2	#3
#4	#5	#6

This here is a HTML table; rule of thumb is “Never use tables for design only for tabular data”. So you like would like to know how to make one of these in your html page of site. A table always starts with a <table> tag and ends with </table> tag.

<table border="1px">
 </table>

by specifying border="1px" attribute means the borders of the table will be 1 pixel thick. Now we need rows and columns in our table in order to do this we need following tags: <caption> for table caption/title.(totally optional) <tr> for table rows. <th> for heading. <td> for table data. You start with specifying row then within them either table header or data for example a table without headers,one row 3 data fields

<table border="1px">
 <caption>Table Result</caption>
 <tr>
 <td>#1</td>
 <td>#2</td>
 <td>#3</td>
 </tr>
 </table>

Table Result

#1

#2

#3

Meh... doesn't look too great without headers. So now an example a table with headers,one row 3 data fields

<table border="1px"><caption>Table with heading result</caption>
 <tr>
 <th>column 1</th>
 <th>column 2</th>
 <th>columm 3</th>
 </tr>
 <tr>
 <td>#1</td>
 <td>#2</td>
 <td>#3</td>
 </tr>
 </table>

Table with heading result

column 1	column 2	colum 3
#1	#2	#3

Now that was the basics,what else you can do with a table is add attributes to table data(<td>) tags to affect how they are displayed. 1.) Colspan attribute allows a table data cell to span across multiple columns. It requires the minimum amount columns you plan to span define in the row before or after it. then simply add the colspan attribute to the table data(<td>) tag you want to span. In this example we'll be spanning table data #2 cell over two columns in a table that has four columns.

<table border="1px"><caption>Table colspan Result</caption>
 <tr>
 <td>columm 1</td>
 <td>column 2</td>
 <td>column 3</td>
 <td>column 4</td>
 </tr>
 <tr>
 <td>#1</td>
 <td colspan="2">#2</td>
 <td>#3</td>
 </tr>
 </table>

Table colspan Result

column 1	column 2	column 3	column 4
#1	#2		#3

2.) Rowspan attribute well it's pretty obvious, it span table data across rows.It requires the minimum amount rows you plan to span in the table before you can span across.Like colspan, simply add the rowspan attribute to the table data(<td>) tag you want to span. In the following example table data #2 cell span across 2 columns and 3 rows.

<table border="1px">
 <caption>Table Rowspan Result</caption>
 <tr>
 <td>columm 1</td>
 <td>column 2</td>
 <td>column 3</td>
 <td>column 4</td>
 </tr>
 <tr>
 <td>#1</td>
 <td colspan="2" rowspan="3">#2</td>
 <td>#3</td>
 </tr>
 <tr>
 <td>#4</td>
 <td>#5</td>
 </tr>
 <tr>
 <td>#6</td>
 <td>#7</td>
 </tr>
 </table>

Table rowspan result

columm 1	column 2	column 3	column 4
#1	#2		#3
#4			#5
#6			#7

Alright that does it for tables. Now go make some tables lol.
Tags:HTML, HTML5, web, Web Design, Web Tutorial