More on Tables

 



Adding a Caption

  • To add a title to your table, you can use the <caption> element. This element helps both in terms of SEO and accessibility.

<table>
  <caption>Student Details</caption>
     <!-- Rest of the table here -->
</table>

Table Headers and Footers

  • Besides <th> for individual header cells, HTML tables allow you to group header or footer content using <thead> and <tfoot>.

<table>
  <thead>
     <!--  header content -->
  </thead>
  <tfoot>
  <!-- footer content -->
  </tfoot>
  <tbody>
  <!-- body content -->
  </tbody>
</table>

Column Groups

  • You can use the <colgroup> and <col> elements to apply styles to an entire column in an HTML table.

<table>
  <colgroup>
    <col style="background-color:yellow">
  </colgroup>
  <!-- rest of the table -->
</table>

Accessibility in Tables

  • To make your tables more accessible, you can use the scope attribute in <th> elements to specify if they are headers for columns, rows, or groups of columns or rows.


<th scope="col">Name</th>
<th scope="col">Age</th>

Related Posts:

  • Definition Lists A Definition List in HTML is used to represent a list of terms along with their corresponding descriptions or definitions. The Definition List i… Read More
  • Ordered List HTML Ordered ListAn ordered list is used to create a list of items in a specific order, typically indicated by numbers.SyntaxKey PointsOrdered l… Read More
  • Unordered List HTML Unordered ListAn unordered list is a list of items that are not arranged in any specific, sequential order. Unlike ordered lists, the items… Read More
  • figure tag The figure element is particularly useful for images, illustrations, diagrams, videos, audio clips, and other types of media.Use the alt attribu… Read More
  • HTML Lists Types of HTML ListsUnordered List: An unordered list is used to create a list of items that are not in any particular order. Each list item… Read More

0 Comments:

Post a Comment

Do leave your comments