Table Attributes in HTML

Table Attributes in HTML

• HTML table attributes help create tabular data
representation on webpages using tags
like <table>, <tr>, <td>, <th>, and <caption>.
Customization and interactivity are achieved through
additional tags and styles. Tables serve various
purposes, such as comparing data pieces, data
analysis, and presenting text information with
corresponding numerical data on webpages or web
applications.
Attributes
•Table attributes in HTML are used to customize
table such as changing it's background color,
alignment, width, border, etc.
Attributes
• let's have a look at list of table attributes and tags
Attributes
 <table border="1">
<tr>
HTML Border Attribute <th>Name</th>
<th>Job</th>
<th>Working Experience</th>
</tr>
• Using the Inline HTML <tr>
Border Attribute <td>John</td>
<td>Software Engineer</td>
<td>5 Years</td>
</tr>
<tr>
<td>Ale</td>
<td>Senior Web developer</td>
<td>2 Year</td>
</tr>
<tr>
<td>Jack</td>
<td>Junior Tech Writer</td>
<td>6 Months</td>
</tr>
</table>
HTML Border Attribute
• Using CSS border property
To add borders to your table using CSS,
you just need to use this border property
in your style tag or in a CSS file.

table, td, th {
border: 1px solid;
}
OUTPUT
• The output results for both the methods using inline border
attribute or CSS border property are same as the following :

• Note- In the above example we have separate borders for all the cells
of one table and collapsed of another. Collapsed borders can be
achieved by using the border-collapse property of CSS :
table, td, th {
border: 1px solid;
border-collapse: collapse;
}
OUTPUT
• Using CSS border-collapse property, we have collapsed different
borders of all the cells into a single border.
table, td, th {
border: 1px solid;
border-collapse: collapse;
}
The Cell Padding
HTML Table Cell Padding
• If there should be some gap between borders and nested data in the
table, this gap is known as cell padding.
• Apply the gap by using padding property of CSS as follows.
td, th {
padding: 1.5rem;
}

• There is also another property to add space between the borders of

the cells of a table.
table {
border-spacing: 5px;
}
OUTPUT
• Using padding, we have added space between the data
stored and borders of a cell, while border-spacing is to add space
between the borders of the cells of a table.
HTML table with Colspan
HTML table with Colspan
• Colspan is an attribute which assigns multiple columns to a cell of a
table. The number of columns depends on the value entered by you
in colspan="" attribute.
 <table>
<tr>
<th>Name</th>
HTML table with Colspan <th colspan="2">Jobs</th>
<th>Working Experience</th>
</tr>
<tr>
• Let's go back to our previous <td>John</td>
example HTML <td>Software Engineer</td>
<td>Data Analyst</td>
<td>5 Years</td>
</tr>
<tr>
<td>Ale</td>
<td colspan="2">Senior Web developer</td>
<td>2 Year</td>
</tr>
<tr>
<td>Jack</td>
<td>Junior Tech Writer</td>
<td>Blogger</td>
<td>6 Months</td>
</tr>
</table>
HTML table with Colspan
• Example with CSS
td, th {
padding: 1.5rem;
}
table {
border-spacing: 5px;
}
table, td, th {
border: 1px solid;
}
HTML table with Colspan
• OUTPUT
HTML tables with Rowspan
HTML tables with Rowspan
• Rowspan in table, works similar to the colspan for columns,
but here, we assign multiple rows to a cell using an
attribute rowspan="" .
 <table>
<tr>
HTML tables with Rowspan <th>Name</th>
<th colspan="2">Jobs</th>
<th>Working Experience</th>
</tr>
• Example <tr>
<td>John</td>
• Now we need to assign same <td>Software Engineer</td>
<td>Data Analyst</td>
working experience for <td rowspan="2">5 Years</td>
Ale, and John </tr>
in our example, <tr>
<td>Ale</td>
this can be done as following. <td colspan="2">Senior Web developer</td>
</tr>
<tr>
<td>Jack</td>
<td>Junior Tech Writer</td>
<td>Blogger</td>
<td>6 Months</td>
</tr>
</table>
HTML tables with Rowspan
• OUTPUT
HTML Tables with Caption
HTML Tables with Caption
• In a HTML table, caption is simply the title of the table. For this,
HTML <caption></caption> tag can be used.
• <Caption> tag can be used in <table> tag, but it is recommended to
use <caption> tag just after the <table> tag to keep your code clean
and easy to understand.
 <table>
<caption> New Employees Records </caption>
<tr>
HTML Tables with Caption <th>Name</th>
<th colspan="2">Jobs</th>
<th>Working Experience</th>
</tr>
• <Caption> tag <tr>
can be used in <table> tag <td>John</td>
<td>Software Engineer</td>
<td>Data Analyst</td>
<td rowspan="2">5 Years</td>
</tr>
<tr>
<td>Ale</td>
<td colspan="2">Senior Web developer</td>
</tr>
<tr>
<td>Jack</td>
<td>Junior Tech Writer</td>
<td>Blogger</td>
<td>6 Months</td>
</tr>
</table>
HTML Tables with Caption
caption {
• Additional CSS code to make caption border: 2px solid;
look as a part of table (Optional). padding: 0.7rem;
}

• Output
• caption is assigned to the table i.e "New Employees Record", using
the <caption> tag.
HTML table with Background Color
HTML table with Background Color
• We can add background color to a particular cell, row
or to a complete table.
• This can be done by CSS background-color property
or by HTML inline attribute.
HTML table with Background Color
<table>
• Using HTML Inline Attribute <tr>
<th>Name</th>
Add bgcolor="#$$$$$$" attribute to <th>Jobs</th>
any element of the table in which <th>Working Experience</th>
</tr>
you want to add background color. <tr>
<td>John</td>
<td>Software Engineer</td>
<td>5 Years</td>
</tr>
<tr id="eligible" bgcolor="#0bb31e">
<td>Ale</td>
<td>Senior Web developer</td>
<td>2 Year</td>
</tr>
</table>
HTML table with Background Color
• Using CSS background-color Property Simply just add
this background-color property to your css code for the element
which you want to color. #eligible {
background-color: #0bb31e;
}

• Output
 <table>
<tr>
The <tr id=“”> <th>Name</th>
<th>Jobs</th>
<th>Working Experience</th>
• An id on a <tr> tag assigns an </tr>
identifier to the table row. <tr>
<td>John</td>
• The identifier must be unique across <td>Software Engineer</td>
the page. <td>5 Years</td>
</tr>
<tr id="eligible" bgcolor="#0bb31e">
<td>Ale</td>
<td>Senior Web developer</td>
<td>2 Year</td>
</tr>
</table>
End