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.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment