Skip to main content

Lesson 11: More about tables

Create even more advanced tables.


Lesson 11: More about tables

The title "More about tables" may sound a bit boring. But look at the positive side, when you master tables, there is absolutely nothing about HTML that will knock you out.

What is left then?

The two attributes colspan and rowspan are used when you want to create fancy tables.
Colspan is short for "column span". Colspan is used in the <td> tag to specify how many columns the cell should span
:
Example 1:
 
 <table border="1">
<tr>

lspan="3">Cell 1</td>
   </tr
<td c
o>
   <tr>
  <td>Cell 2</td>

4</td>
   </tr>
 
<td>Cell 3</td>
  <td>Cell
 </table>
Will look like this in the browser:
Cell 1
Cell 2Cell 3Cell 4
By setting colspan to "3", the cell in the first row spans three columns. If we instead had set colspan to "2", the cell would only have spanned two columns and it would have been necessary to insert an additional cell in the first row so that the number of columns will fit in the two rows.
Example 2:
 
 <table border="1">
<tr>

lspan="2">Cell 1</td>
  <td>C
<td c
oell 2</td>
   </tr>
   <tr>

4</td>
  <td>Cell
<td>Cell 3</td>
  <td>Cell
  5</td>
   </tr>
 </table>
Will look like this in the browser:
Cell 1Cell 2
Cell 3Cell 4Cell 5

What about rowspan?

As you might already have guessed, rowspan specifies how many rows a cell should span over:
Example 3:
 
 <table border="1">
<tr>

wspan="3">Cell 1</td>
  <td>C
<td r
oell 2</td>
   </tr>
   <tr>

 <tr>
  <td>Cell 
<td>Cell 3</td>
   </tr>
 
 4</td>
   </tr>
 </table>
Will look like this in the browser:
Cell 1Cell 2
Cell 3
Cell 4
In the example above rowspan is set to "3" in Cell 1. This specifies that the cell must span over 3 rows (its own row plus an additional two). Cell 1 and Cell 2 are thereby in the same row, while Cell 3 and Cell 4 form two independent rows.
Confused? Well, it is not uncomplicated and it is easy to lose track. Therefore, it might be a good idea to draw the table on a piece of paper before you begin with the HTML.
Not confused? Then go ahead and create a couple of tables with both colspan androwspan on your own.
Labels:

Comments

Post a Comment

Popular posts from this blog

Lesson 10: Margin and padding css

Lesson 10: Margin and padding In the previous lesson you were introduced to the box model. In this lesson, we will look at how you can change the presentation of elements by setting the  margin  and  padding properties. Set the margin in an element Set the padding in an element Set the margin in an element An element has four sides: right, left, top and bottom. The  margin  is the distance from each side to the neighboring element (or the borders of the document). See also the diagram in  lesson 9  for an illustration.
Post a Comment
More information Read more

Lesson 9: Images

Familiarise yourself with seven of the most-used elements Lesson 9: Images Wouldn't it be great if you could have an image of actor and music legend David Hasselhoff right in the centre of your page? That sounds like a bit of a challenge... Maybe, but in fact it is pretty easy to do. All you need is an element: Example 1: <img src="david.jpg" alt="David" /> would look like this in the browser
Post a Comment
More information Read more

Lesson 2: How does CSS work?

Lesson 2: How does CSS work? In this lesson you will learn how to make your first style sheet. You will get to know about the basic CSS model and which codes are necessary to use CSS in an HTML document. Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML. Thus, if you are used to use HTML for layout, you will most likely recognize many of the codes. Let us look at a concrete example. The basic CSS syntax Let's say we want a nice red color as the background of a webpage: Using  HTML  we could have done it like this: <body bgcolor="#FF0000"> With  CSS  the same result can be achieved like this:
Post a Comment
More information Read more