Coding tables

It must be a haircut day. Tom, Alex, and Kel all got haircuts today. I’m surprised Karissa decided against a haircut. She usually likes her hair short, much to my dismay. I love my girls to have long hair… but it is their hair. I don’t plan on having my hair cut anytime soon. I like my long hair.

Tommy needs to study and do homework, so we are at the University library. The site where I do my coding was very laggy today. I just kept being frustrated at having to wait for it to load. Yes, first-world problems. I did some coding today in HTML and CSS, and I have my notes here:

Resources: freecodecamp, w3schools, hashnode.dev

table: A table in HTML consists of table cells inside rows and columns.

< table >
  < tr >
    < th >Company< /th >
    < th >Contact< /th > 
    < th >Country< /th >
  < /tr >
  < tr >
    < td >Alfreds Futterkiste< /td >
    < td >Maria Anders< /td > 
    < td >Germany< /td >
  < /tr >
< /table >

HTML tables use the caption element to describe what the table is about. The caption element should always be the first child of a table, but can be positioned with the caption-side CSS property.

< table >< caption >< /caption >
          < /table >

The thead and tbody elements are used to indicate which portion of your table is the header and which portion contains the primary data or content.

< table >
            < caption >Assets< /caption >
            < head >< /thead >
            < body >< /tbody>
          < /table >

The tr element indicates a table row. The td element indicates a data cell, while the th element indicates a header cell.

< thead >
              < tr >
                < td >< /td >
              < th >< /th >
              < th >< /th >
              < th >< /th >
              < /tr >
            < /thead>

The ‘sr-only‘ tag is a class used to apply some unique CSS code to an HTML element. The ‘sr’ stands for screen reader. The tag is used to apply code to make an element ‘visible’ only to screen readers and hidden from the rendered page layout.

The span[class~=”sr-only”] selector will select any span element whose class includes sr-only.

The CSS clip property is used to define the visible portions of an element.

clip: rect(1px, 1px, 1px, 1px);

The clip-path property determines the shape the clip property should take.

clip-path: inset(50%);