Showing posts with label TABLE. Show all posts
Wednesday, January 16, 2019
HOW TO CREATE A PROFESSIONAL LOOKING TABLE WITH CSS| STEP BY STEP GUIDE
CSS
,
STYLING
,
TABLE
No comments
:
Hi, in this lesson, I am going to take you by hand and walk you through various steps on how to create a professional looking table using Cascading Style sheet. In our HTML lesson, precisely lesson Five, we extensively discussed table features and how to use HTML to create a common table. In this lesson, I will be a little bit technical in my expression so I adjure to pause this lesson and click here to refresh your memory with structures and fundamentals of creating a table.
The new features I’m going to introduce to you before I proceed include the following below:
a) Border-collapse: It is used to indicate whether table borders should be collapsed into a single border or separated as default.
b) Border-spacing: It is used to change the spacing of a border if border-collapse is separated.
c) Caption-side: It is used to indicate the position of the table caption. It can be set at the bottom or top. You will understand better if will move into examples.
d) Text-transform: It is used to determine whether the text should be in uppercase, toggle or lower case.
e) <th> element: It means table heading. It is used to specify the heading of a table.
EXAMPLE
Write the following codes in your text editor
HTML FILE
<table border="1">
<caption>CODING LEGIT COURSES</caption>
<tr>
<th>Course name</th>
<th>Lecturer</th>
<th>Time</th>
</tr>
<tr>
<td>HTML Course</td>
<td>Mabel Idike</td>
<td>8:00pm</td>
</tr>
<tr>
<td>CSS Course</td>
<td>Lilian Isaac</td>
<td>11:00pm</td>
</tr>
<tr>
<td>JavaScript Course</td>
<td>Daniel Unachukwu</td>
<td>12:00pm</td>
</tr>
<tr>
<td>Java Course</td>
<td>Kingdom Eleru</td>
<td>6:00pm</td>
</tr>
CSS FILE
caption{
caption-side: top;
}
caption{
color: mediumseagreen;
font-weight: bolder;
}
table,tr,td{
color: blue;
border-color: green;
text-align: center;
font-weight: bold;
}
th{
color: red;
}
REFERENCE THE CSS IN YOUR HTML DOCUMENT. IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS
WRAPPING UP
You can add more codes to the CSS file to make your table look awesome. For instance, you can add border-radius: 15px, border-collapse, text transform, etc. Our next lesson is the most interesting part of CSS. See you then.
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:
Posts
(
Atom
)
