How to Use HTML Table Border Tag: Complete Guide with Code Examples

HTML TUTORIALS-

HTML Table Borders Tag –

Introduction-

HTML Table Borders Tutorial: Border Attribute, CSS Borders & Styling Explained HTML Table Borders Tag -

HTML tables are used to display data in a structured format, typically in rows and columns.also main important feature of HTML tables is the ability to add borders.this helps to table cells, rows, and columns, making data easier to read and visually organized.

Trulli Trulli

-)📋 1. Basic Table Border?:-

<table style="border: 1px solid black;">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
</table>
Name Age
John 30

🧱 2.Dotted Table Borders-👇


<table style="border: 2px dotted blue;">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Book</td>
    <td>$10</td>
  </tr>
</table>
Item Price
Book $10

🧱 3.Round Table Borders Example-👇


<table style="border: 2px solid gray; border-radius: 10px;">
  <tr>
    <th>Language</th>
    <th>Difficulty</th>
  </tr>
  <tr>
    <td>Python</td>
    <td>Easy</td>
  </tr>
</table>
Language Difficulty
Python Easy

🧱 4.Style Table Borderss Example-👇


<table style="border: 3px double black;">
  <tr>
    <th>Country</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>India</td>
    <td>New Delhi</td>
  </tr>
</table>
Country Capital
India New Delhi

🧱 5.Collapsed Table Borders Example-👇

<table style="border: 1px solid black; border-collapse: collapse;">
  <tr>
    <th>Product</th>
    <th>Qty</th>
  </tr>
  <tr>
    <td>Pen</td>
    <td>50</td>
  </tr>
</table>
Product Qty
Pen 50

🧱 6.Border Color Example-👇



<table style="border: 2px solid; border-color: orange;">
  

  <tr>
    <th>Day</th>
     <th>Activity</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>Gym</td>
  
  </table>
Day Activity
Monday Gym

🔍 Tag Breakdown-

Table Tag Breakdown

-) Table Tag Breakdown -

Tag Purpose
<table> Defines the table
<tr> Table row
<th> Table header (bold + centered by default)
<td> Table data (cell content)
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a (colgroup) element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table

Live Code Preview

May Be Like Important Link-

-HTML Colors Explained: Color Names, Hex Codes, RGB, HSL & Styling Guide for Beginners

-HTML Comments Tag Explained with Examples | How to Add Comments in HTML for Beginners

-HTML Favicon Tag -How to Add, Customize, and Optimize Website Icons for All Browsers

-What is the HTML Page Title Tag, why it’s important for SEO HTML Page Title Tag

-HTML Tables Tag Explained: How to Create Responsive HTML Table with