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:

  • SVG in HTML What is SVG?SVG stands for Scalable Vector Graphics. Unlike raster images like PNGs or JPGs, SVGs are not pixel-based. They're composed of vector… Read More
  • iFrames in HTMLWhat is an iFrame?An iFrame is an HTML element that enables an inline frame for the embedding of external content. Essentially, you can load another w… Read More
  • block level element What are Block-level Elements?Block-level elements are those that start on a new line and take up the entire width of their container by default… Read More
  • Link & Script TagsThe <link> and <script> tags are essential elements within an HTML document's <head> section. The… Read More
  • Video & Audio Tags<video> TagThe <video> HTML element embeds a media player that supports video playback into the document.The <video> tag create… Read More

0 Comments:

Post a Comment

Do leave your comments