« Previous Next »

Borders


Simple Solid Borders


Colored Cells Table


Light Blue Border Table


Simple Solid Borders

Output :

Colored Table

Output :

Border Color Table

Output :

Practice Exercises

Task 1: How to create a colored table using bgcolor attributes?

Goal: Learn how to apply background colors to an entire table and specific header rows using HTML attributes.
💡 Hint: Use bgcolor="lightyellow" in <table> and bgcolor="skyblue" in <tr>.
💡 Show Solution 
<html>
  <body>
    <h2>AIT Employee Schedule</h2>
    <p>Colored table example using pure HTML attributes.</p>

    <table border="1" bgcolor="lightyellow" bordercolor="black" width="100%">
      <tr bgcolor="skyblue">
        <th>Staff Name</th>
        <th>Assigned Domain</th>
        <th>Shift Time</th>
      </tr>
      <tr>
        <td>Aarav Verma</td>
        <td>Frontend Development</td>
        <td>Morning (9 AM - 1 PM)</td>
      </tr>
      <tr>
        <td>Ananya Deshmukh</td>
        <td>Database Systems</td>
        <td>Evening (2 PM - 6 PM)</td>
      </tr>
    </table>
  </body>
</html>
Output :

AIT Employee Schedule

Colored table example using pure HTML attributes.

Staff Name Assigned Domain Shift Time
Aarav Verma Frontend Development Morning (9 AM - 1 PM)
Ananya Deshmukh Database Systems Evening (2 PM - 6 PM)
Explanation: The bgcolor attribute sets background color for the table or individual rows, making key header sections visually distinct.
Task 2: How to customize table border color?

Goal: Practice styling table borders with specific color names using the bordercolor attribute.
💡 Hint: Use border="1" bordercolor="lightblue" inside the <table> tag.
💡 Show Solution 
<html>
  <body>
    <h2>Academic Performance - AIT</h2>

    <table border="1" bordercolor="lightblue" width="100%">
      <tr>
        <th>Candidate Name</th>
        <th>Enrolled Course</th>
        <th>Score (%)</th>
      </tr>
      <tr>
        <td>Kabir Mehta</td>
        <td>Cyber Security</td>
        <td>88</td>
      </tr>
      <tr>
        <td>Riya Kulkarni</td>
        <td>AI & ML Essentials</td>
        <td>94</td>
      </tr>
    </table>

    <p>This table displays final assessment scores of top performers.</p>
  </body>
</html>
Output :

Academic Performance - AIT

Candidate Name Enrolled Course Score (%)
Kabir Mehta Cyber Security 88
Riya Kulkarni AI & ML Essentials 94

This table displays final assessment scores of top performers.

Explanation: The bordercolor="lightblue" attribute changes the default black borders to a light blue shade across all grid cells.
« Previous Next »