Create A Table Using HTML

In this Blog Article we will learn how to create a Table with HTML.

Well in the old days , where CSS was not born yet, basically The table is widely used to Style and arrange content .

Even though fast forward to  now, people rarely used table , as there are plugin and CSS , we must at least have a basic understanding on how to create a Table

Step by Step Creating a Table using HTML

Step 1

Create the Table Tag

<table class=”table table-bordered”>

</table>

Step 2

Your table need a head and a body

<table class=”table table-bordered”>

<thead>

< /thead>

<tbody>

</tbody>

</table>

Step 3

Put the main content into the head and body , <tr> stands for row <td>stands for column.<td> are always assign within the row .

<table class=”table table-bordered”>
<thead>
<tr class=”success”>
<th style=”text-align: center;”>No</th>
<th style=”text-align: center;”>School</th>
<th style=”text-align: center;”>MBA</th>
<th style=”text-align: center;”>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan=”1″>1</td>
<td>anyang Technology University</td>
<td>Nanyang-Waseda Double MBA Full Time</td>
<td>S$ 70,000</td>
</tr>

</tbody>
</table>

Styling your Table.

Put the Styling part within the head of your HTML .

• First Style your Table Fonts
• Style the Table border
• Style the table width
• Style the table column, border,
• Style the table background color

<style>
table {
font-family:”Times New Roman”, Georgia, Serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 10px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
</style>

 

Hopefully after this tutorial , you got an idea  Create A Table Using HTML.

Check out how to create a Paragraph and list Here.