DEV Community

Cover image for HTML Tutorial: HTML Tables, Classes and Ids
Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

HTML Tutorial: HTML Tables, Classes and Ids

#html #webdev #codenewbie #tutorial

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.

AD-BANNER

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:

<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>
Enter fullscreen mode Exit fullscreen mode

Adding a border

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

CSS Code:

Table, th, td {
  Border: 1px solid black;
}
Enter fullscreen mode Exit fullscreen mode

Don’t worry we are going to explain better on 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:

<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>
Enter fullscreen mode Exit fullscreen mode

HTML Id attribute

This is used to specify a unique id in an HTML document. It is used to point specific style declaration in a style sheet. It is also used by Javascript 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:

<!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>
Enter fullscreen mode Exit fullscreen mode

Difference between id and class

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

Create Stunning Websites and Web Apps

Building different custom components in react for your web apps or websites can get very stressful. That's why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro. Try contrast pro!

Contrast Design Boostrap

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc. project with a clean, well documented, well crafted template and UI components. Learn more about Contrast Pro

Resources

Top comments (0)

Read next

gleamso profile image

The No-Fluff Guide to OpenGraph Images That Actually Work 🎯

gleamso -

hanzla-baig profile image

How to Build a Advanced Portfolio with High-Level Features and Cutting-Edge Technologies for Web Developers and Designers 🚀🌟

Hanzla Baig -

elafella profile image

A discussion platform for developers

ElaFella -

bregwin profile image

Testing Troubles with Jest & ESM and how to fix it

Bregwin Jogi -