Hi developers, in this article I am going to share all HTML Table attributes with you that you will use while creating HTML tables in your web project. Based on different layout.
So, here is the list of All HTML Table Attributes with explanation and code example so that you can learn All HTML Table Attribute by real example.
Tables are one of the most essential structures in HTML. They help display organized data such as pricing lists, employee records, schedules, or any kind of structured information. While modern websites often use CSS Grid or Flexbox for layout design, understanding HTML tables remains important because they are still widely used in dashboards, reports, and admin panels. Learning these attributes helps you gain full control over the look and feel of your tables and ensures your data remains clear and easy to read.
If you want to master HTML from scratch, check out my HTML Course, where I cover everything you need to know!
border
The border attribute in HTML table is used to add a border on table. In real example it’s make a look of HTML table like a real table including rows and columns.
Code Example
<table border="1">
<tr>
<td> Name </td>
<td> Role </td>
</tr>
<tr>
<td> Rehana </td>
<td> Frontend Developer </td>
</tr>
</table>This simple border helps users visually separate rows and columns, giving your table a professional, structured appearance.
cellpadding
In HTML table cellpadding attribute is used to specify the space between the cell content and the cell borders.
Code Example
<table border="1" cellpadding="10">
<tr>
<td> Name </td>
<td> Role </td>
</tr>
<tr>
<td> Rehana </td>
<td> Frontend Developer </td>
</tr>
</table>Increasing cellpadding improves readability and ensures that text isn’t cramped against the cell edges.
cellspacing
In HTML table the cellspacing attribute is used to specify the space between the table cells.
Code Example
<table border="1" cellspacing="20">
<tr>
<td> Name </td>
<td> Role </td>
</tr>
<tr>
<td> Rehana </td>
<td> Frontend Developer </td>
</tr>
</table>Using proper spacing between cells gives your table a neat layout, especially when displaying large datasets.
width
As the name suggests itself, the width HTML table attribute is used to adjust or set the width of table.
Code Example
<table border="1" width="500px">
<tr>
<td> Name </td>
<td> Role </td>
</tr>
<tr>
<td> Rehana </td>
<td> Frontend Developer </td>
</tr>
</table>height
The height table attribute in HTML is used to adjust or set the height of table.
Code Example
<table border="1" height="200px">
<tr>
<td> Name </td>
<td> Role </td>
</tr>
<tr>
<td> Rehana </td>
<td> Frontend Developer </td>
</tr>
</table>Use relative values like percentages for better responsiveness on mobile devices. Fixed values in pixels might break layouts on smaller screens.
To make your HTML tables more accessible and modern, it’s important to follow best practices and understand how these attributes integrate with CSS and responsive design. While traditional attributes like border, cellpadding, and bgcolor provide basic control, modern developers often use CSS properties such as border-collapse, padding, and background-color for better flexibility and cleaner markup. For instance, instead of using the align attribute, you can use text-align: center; or margin: auto; in CSS to achieve the same effect in a more standardized way.
Additionally, you can use the <caption> tag to add a title or description for your table, improving readability and accessibility for screen readers. Example:<caption>Employee Details Table</caption> helps users understand what kind of data is being presented. Similarly, using <thead>, <tbody>, and <tfoot> elements gives your table structure and makes it easier to style and maintain.
For modern web projects, combining semantic HTML with CSS makes your tables not only visually appealing but also mobile-friendly. You can make tables responsive by using CSS properties like overflow-x: auto; inside a container div, allowing users to scroll horizontally on smaller screens without breaking the layout.
Lastly, remember that while HTML table attributes are still supported, they’re considered outdated in HTML5. Using CSS is the recommended way to style and position tables. Still, knowing these attributes ensures you can work effectively with legacy code and older web systems where these attributes are commonly found.
Using HTML table attributes with clean structure improves accessibility for all users. Add CSS hover effects or row colors to make your tables more attractive, clear, and easy to read on any device.
Summary
HTML tables are a core component of web design for organizing structured data into rows and columns. Each attribute, from border and cellpadding to colspan and rowspan, serves a specific purpose in improving the table’s readability and structure.
However, it’s important to remember that while these attributes help you understand the fundamentals, modern web design now prefers CSS-based styling for cleaner and more responsive layouts.
Still, mastering these attributes is invaluable for every beginner. It helps you understand how browsers render data and gives you insight into legacy systems that still rely on traditional HTML. Once you grasp these basics, transitioning to advanced CSS table design and responsive layouts becomes much easier.
By learning and experimenting with these HTML table attributes, you’ll gain confidence in building tables that not only display information effectively but also adapt well to different screens and devices.
Code Example
<table border="1" summary="DesignWithRehana Information">
<tr>
<td> Name </td>
<td> Role </td>
</tr>
<tr>
<td> Rehana </td>
<td> Frontend Developer </td>
</tr>
</table>align
This HTML Table attribute specify the horizontal alignment of the table on the web page.
Code Example
<table border="1" align="center">
<tr>
<td> Name </td>
<td> Role </td>
</tr>
<tr>
<td> Rehana </td>
<td> Frontend Developer </td>
</tr>
</table>bgcolor
bgcolor HTML Table attribute is used to set the background color of the table.
Code Example
<table border="1" bgcolor="skyblue">
<tr>
<td> Name </td>
<td> Role </td>
</tr>
<tr>
<td> Rehana </td>
<td> Frontend Developer </td>
</tr>
</table>colspan
The colspan table attribute is used to specify the number of columns a cell should span.
Code Example
<table border="1">
<tr>
<td colspan="2"> Rehana Information </td>
</tr>
<tr>
<td> Name </td>
<td> Role </td>
</tr>
<tr>
<td> Rehana </td>
<td> Frontend Developer </td>
</tr>
</table>rowspan
The rowspan table attribute is used to specify the number of rows a cell should span.
Code Example
<table border="1">
<tr>
<td> Name </td>
<td> Role </td>
</tr>
<tr>
<td> Rehana </td>
<td rowspan="2"> Frontend Developer </td>
</tr>
<tr>
<td> Raju </td>
</tr>
</table>
Nice
Thanks 💞
It is truly a nice and helpful piece off info.
I am satisfied that you simply shared thhis helpul info with
us. Please stay us up to date like this. Thans for sharing. https://Www.waste-ndc.pro/community/profile/tressa79906983/
It’s awesome in favor of me to have a web site, which is good designed
for my knowledge. thanks admin https://worldpokerdeals.com/blog/best-ripple-poker-sites