Wednesday, December 26, 2018
STEP BY STEP GUIDE ON HOW TO CREATE & DESIGN A TABLE ON A WEB PAGE
Happy to meet you again on this platform, let’s do it again. In today’s lesson, I will be teaching you how to construct and design a table using HTML codes. If you’re willing to hold hand with me, then I will walk you through this lesson with no iota of stress. Get your text editor ready, let’s go to work.
HOW TO CREATE A TABLE ON A WEB PAGE USING HTML
In HTML document, tables are indicated using the <table> tag. Generally speaking, tables are characterized by rows and columns. Creating a row and a column in HTML require unique tags. For rows, you use <tr> and then <td> for columns.
Note that the <td> tags act as data containers within the table. What I mean by this is that <td> tags contain all kind of elements such as text, images, lists, to mention but a few. Confusing? Never worry, you will understand better as we progress. Just bear in mind that <td> tags behave like data containers.
If you want to create, let’s say one row and four columns. Here is the formula to follow:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Before we move on, there are three things I would want you to know. These three things include border attributes, colspan and bg color. Let's briefly overview them.
a) Border Attribute
A border attribute is used to add border to a table.
It is used within the table tag like this
<table border=’’2’’>
b) Colspan
Colspan is, on the other hand, used to expand or extend a cell so that it will look longer than other cells.
To fully understand what I mean by the above statement, let us consider an example. Therefore, write the following codes into your text editor.
<table border=‘’2’’>
<tr>
<td>Love</td>
<td>Peace</td>
<td>Unity</td>
</tr>
<tr>
<td><br /></td>
<td colspan=’’2’’ ><br /></td>
</tr>
</table>
It will look like this
Save and open it, the result will look like this
c) Align Attribute
To change the table’s position, you can use align attribute within the table tag just as you did in border attribute. That is
<table align=’’center’’>
d) Bgcolor attribute
To specify the background of any cell in a table, use the background-color attribute.
Study the example below to understand what i mean.
<table border=’’2’’>
<tr>
<td bgcolor=’’green’’>Love</td>
<td>Peace</td>
<td>Unity</td>
</tr>
<tr>
<td>One</td>
<td Colspan=’’2’’’>Nigeria</td>
</tr>
</table>
It will look like this
Save and open it will look like this
WRAPPING UP
Please note that CSS is more effective and beautiful than HTML in the case of styling elements. In CSS is the best. When we get to CSS course you will understand.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment