HTML Table

A HTML table is defined with the <table> tag. This allows HTML to arrange words in tabular form. Each table row is defined with the <tr> tag.

A table header is defined with the <th> tag. By default, the headings are bold and centered. A table data/cell is defined with the <td> tag.

HTML Code:

html

<table style = “width:100%”>
  <tr>
     <th> LastName </th>
     <th> FirstName </th>
     <th> Age </th>
  </tr>
  <tr>
    <td> William</td>
    <td> Sam</td>
    <td> 30 </td>
  </tr>
</table>

Adding a border

You can add a border using a CSS border property to the table.

CSS Code:

html

Table, th, td {
  Border: 1px solid black;
}

Don’t worry we are going to explain better in our CSS tutorial.

HTML Classes

The class attribute is used to specify a class for an HTML element. It is common to find multiple HTML elements sharing the same class.

HTML Code:

html

<style>
  .cities {
    Background-color:blue
    Color: white;
    Margin: 20px
    Padding: 20px
  }
</style>
<div class = “cities”>
  <h2> London</h2>
  <p> London is the capital of England </p>
</div>

<div class= “cities”>
  <h2> Paris </h2>
  <p> Paris is the capital of France </p>
</div>

HTML Id attribute

This is used to specify a unique id in an HTML document. It is used to point specific style declarations in a style sheet. Javascript also uses it to access and manipulate or change the element with the specific ID.

The syntax is written with a hash character "#" followed by an id name.

HTML Code:

html

<!DOCTYPE html>
<html>
 <head>
   <style>
     #myHeader{
       Background-color:lightbllue;
       Color: black;
       Padding: 40px;
       Text-align: center;
      }
   </style>
  </head>
  <body>
    <h1 id= “myHeader”>my Header</h1>
  </body>
</html>

Difference between id and class

The difference lies in how they are used. A class name can be used by multiple HTML elements, while one HTML element within the page must only use an id name.

Conclusion

In this article, we discussed how to create tables on your webpage using HTML.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Html Forms

HTML Responsive web design