CODEWITHSUNDEEP
htmlcsstemplateshtml-table
goryef
goryef

Reputation: 1489

HTML Table template header

I have several HTML tables that using the same header row.

<tr>
  <th width = "70%">Heading 1</th>
  <th width = "12%">Heading 2</th>
  <th width = "9%"><img src='/images/img1.png' height=25 width=25></th>
  <th width = "9%"><img src='/images/img2.png' height=25 width=25></th>
</tr>

Is there a way to create re-usable template for a header that can be user across multiple table? Like creating a class and assigning it to

Thanks in advance for any guidance.

Upvotes: 1

Views: 188

Answers (1)

Awais
Awais

Reputation: 4902

Yes you can use classes to do that and pass the values in HTML via JS, Angular or what ever you want

.table-box{
  width: 100%;
}
.table-box tr th:nth-child(1){
  width: 70%;
}
.table-box tr th:nth-child(2){
  width: 12%;
}
.table-box tr th:nth-child(3),
.table-box tr th:nth-child(4){
  width: 9%;
}
<table class="table-box">
  <tr>
    <th >Heading 1</th>
    <th >Heading 2</th>
    <th ><img src='/images/img1.png' height=25 width=25></th>
    <th ><img src='/images/img2.png' height=25 width=25></th>
</tr>  
  
</table>

Upvotes: 3

Related Questions