Skip to main content

Organizing Data In Table: A Quick Guide

 

Organizing Data In Table: A Quick Guide




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 floatflexbox, 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:

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.



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


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.








Comments

Popular posts from this blog

5 CSS Tips and Tricks to Try in Your Next Project

  5 CSS Tips and Tricks to Try in Your Next Project Looking for inspiration on how to add a twist to your project design? Take a look at these 5 CSS techniques and have fun experimenting with some bold ideas! 1. Bring back the 90’s with the background-clip Have you ever wondered how to apply a gradient or a texture to the text in CSS? The good news is you can easily achieve that with the background-clip property! First, we need to apply the background color to our  <h1> , then use the value text for the  background-clip  property and set the text color to transparent. < h1 class = "wordart" > The background is clipped to this text </ h1 > h1 { background-color: #ff1493; background-image: linear-gradient(319deg, #ff1493 0%, #0000ff 37%, #ff8c00 100%); } .wordart { -webkit-background-clip: text; color: transparent; } And voilĂ , the 90’ style WordArt is ready! 2. Crazy shapes with clip-path If you like to experiment with your ...

1.Change windows password without knowing the existing password

We all know that to change password in windows we need to enter the existing password and then we can proceed to enter the new password.However there is a trick to change password without knowing the existing password. This trick comes handy when the system is logged in and we have forgotten the password or to pull a prank on your friend(do it at your own risk) Step 1: Right click on computer and select manage Step 2: click on Local users and Groups and click on users. On the right pane you will see list of users. step 3: Right click on any user whose password you want to change and click on set password: step 4: click on proceed(Don’t worry about the message) step 5: Enter the new password step 6: Click on ok and your password will change. You can even use the same method to change HOMEGROUP password. (NOTE: This trick works on WIN 7, 8 , 8.1 ,10)