HTML: Tables

-

HTML Tables

Using a table is one of the best ways to present the data.

Create a table

We can use the <table> element to create a table.

  • Tables are divided into table rows with the <tr> tag.
  • Table rows are divided into table columns (table data) with the <td> tag.
  • To add table headings, we use the <th> element.

A border can be added using the border attribute: <table border="3">

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

A border can be added using the border attribute: <table border="3">

Spanning columns and rows

  • Table data can span columns using the colspan attribute.
  • Table data can span rows using the rowspan attribute.
<table>
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
  </tr>
  <tr>
    <td colspan="2">Out of Town</td>
    <td>Back in Town</td>
  </tr>
</table>

Table body

Tables can be split into three main sections: a head, a body, and a footer.

  • A table’s head is created with the <thead> element.
  • A table’s body is created with the <tbody> element.
  • A table’s footer is created with the <tfoot> element.
<table>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Revenue</th>
      <th>Costs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Q1</th>
      <td>$12M</td>
      <td>$10M</td>
    </tr>
    <tr>
      <th>Q2</th>
      <td>$16M</td>
      <td>$2M</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>$32M</td>
      <td>$12M</td>
    </tr>
  </tfoot>
</table>

Comments

Post a Comment

Popular posts from this blog

CSS: Borders

-
  CSS Borders We can style the border of our element easily with CSS. For example, we can set a specific width, style, and color. I. Styling borders border-width : The thickness of the border. A border’s thickness can be set in pixels or with one of the keywords: thin, medium, or thick. border-style : The design of the border. The typical styles are none, dotted, and solid. border-color : The color of the border. p { border-width : 5 px ; border-style : dotted border - color : black ; } We can also use border shorthand p { border : 5 px dotted black ; } We can control the border of different sides independently. div { border-left : 5 px solid yellow ; border-right : 10 px dotted red ; border-bottom : 20 px double green ; border-top : 15 px dashed blue ; } II. Border radius border-radius  gives a curved corner to an element. p { border-radius : 5px ; }
Read more

CSS: Flexbox

-
CSS Flexbox To create columns, we use Flexbox. display: flex By default, when setting  display: flex  on an element, all the children will become columns. . container { display : flex ; } display: inline-flex display: inline-flex  allows multiple flex containers to appear inline with each other. Flex containers can be nested inside each other by declaring  display: flex  or  display: inline-flex  for children of flex containers. justify-content We use a  justify-content  property to position the items from left to right. . container { display : flex ; justify-content : flex - end ; } There are five values for the justify-content property: flex-start : all items are positioned from the left of the parent container, with no extra space between or before them. flex-end : all items are positioned with the last item starting on the right side of the parent container, with no extra space between or after them. center : all items are positio...
Read more

HTML: Forms

-
  HTML Forms Form is used to collect user input. For example, this form will send information to example.html as a POST request < form action = "/example.html" method = "POST" > </ form > I. Form elements <form>  defines an HTML form for user input <input>  defines an input control <textarea>  defines a multiline input control (text area) <label>  defines a label for an element <button>  defines a clickable button <select>  defines a drop-down list <option>  defines an option in a drop-down list II. Input types < input type = "button" /> < input type = "checkbox" /> < input type = "color" /> < input type = "date" /> < input type = "datetime-local" /> < input type = "email" /> < input type = "file" /> < input type = "hidden" /> < input type = "image...
Read more