banner



Pivot Table With Text Data In Data Area

Organizing Data In Table: A Quick Guide

We can use tables to structure data in columns and rows. Table is the HTML way to lay out the data. The CSS way to create the layout on the web page is CSS float, flexbox, and CSS grid. To structure the HTML table, we have to use proper tags and attributes in the code. Some of the HTML tags that we can use in the table are described below. We use attributes to assign properties/styles to elements in HTML. To style the table in HTML, we use the nth-child pseudo-selector.

image

Taimoor Sattar Hacker Noon profile picture

@ taimoor

Taimoor Sattar

I am an independent designer and developer.

We can use tables to structure data in columns and rows. The table is the HTML way to lay out the data. The CSS way to create the layout on the web page is CSS float, flexbox, and CSS grid.

We cover an example to understand how to create a table on the web page. You can view the HTML table example at the below codepen link:

👀 https://codepen.io/taimoorsattar/pen/NWpdwbp

For example, we can create a table in HTML for customer's grocery item bill as below:

                                  <table                    border="3"                    cellpadding="10"                    cellspacing="0">                  <caption>Grocery Items Bill</caption>                  <thead>                  <colgroup>                  <col                    width="60%">                  <col                    width="20%">                  <col                    width="20%"                    span="1"                    style="background-color:#f1f1f1;">                  </colgroup>                  <tr>                  <th                    align="left"                    class="col-item-name">Item Name</th>                  <th                    align="center"                    class="col-quantity">Quantity</th>                  <th                    align="center"                    class="col-price">Price</th>                  </tr>                  </thead>                  <tbody>                  <tr>                  <td>Potatoes</td>                  <td                    align="center">51</td>                  <td                    align="center">$1.00</td>                  </tr>                  <tr>                  <td>Nuts</td>                  <td                    align="center">20</td>                  <td                    align="center">$5</td>                  </tr>                  <tr>                  <td>Onions</td>                  <td                    align="center">4</td>                  <td                    align="center">$3.00</td>                  </tr>                  <tr>                  <td>Very long awkwardly named yet still delicious item here</td>                  <td                    align="center">4</td>                  <td                    align="center">$3.00</td>                  </tr>                  <tr>                  <td>Carrots</td>                  <td                    align="center">12</td>                  <td                    align="center">$2.99</td>                  </tr>                  </tbody>                  <tfoot>                  <td                    class="price_txt"                    scope="col"                    colspan="2">Total Price</td>                  <td                    align="center"                    >$33.79</td>                  </tfoot>                  </table>                              

The above code creates an HTML table on the page (without CSS) as below:

image

To structure the HTML table, we have to use proper tags and attributes in the code. Some of the HTML tags that we can use in the table are described below.

image

Also, in the code, we use attributes to assign properties for the HTML table. Some of the attributes are described below.

image

Style the HTML

To style the Grocery Items Bill table, we can use the below CSS.

                                  caption                  {                  font-size:                  1.5rem;                  margin-bottom:                  1.2rem; }                  table                  {                  table-layout: auto;                  border-spacing:                  0;                  /*  Same as cellspacing="0" */                  border-collapse: collapse;                  width:                  450px;                  margin:                  40px                  auto; }                  table                  th,                  table                  td                  {                  border:                  1px                  solid black;                  vertical-align: top; }                  /* No need for this */                  .col-item-name                  {                  width:                  60%; }                  /* No need for this */                  .col-quantity,                  .col-price                  {                  width:                  20%; }                  table                  th                  {                  background-color:                  #869960;                  color:                  #fff;                  text-shadow:                  1px                  1px                  0                  rgba(0, 0, 0, 0.4); }                  table                  tbody                  tr                  :nth-child(even)                  td                  {                  background-color:                  #dcdcdc; }                  .price_txt                  {                  text-align: right;                  font-weight: bold; }              

Rather than, using CSS to adjust the spacing of the table (e.g. CSS box model), we already specify it using HTML attributes.

Note that due to compatibility issue, if some of the attributes is not supported, we can using CSS to style elements. In the above example, we use both CSS and HTML attributes to assign properties/styles to elements.

Also, in the above CSS, we use the nth-child pseudo-selector to target/style even table rows.

Previously published at https://taimoorsattar.dev/blogs/table-on-webpage/

Tags

# html# css# html-table# frontend# food-tech# web-development# css3# flexbox

Pivot Table With Text Data In Data Area

Source: https://hackernoon.com/organizing-data-in-table-a-quick-guide-m7z34f8

Posted by: thomassathect.blogspot.com

0 Response to "Pivot Table With Text Data In Data Area"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel