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 , , and . CSS float flexbox 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: Grocery Items Bill Item Name Quantity Price Potatoes 51 $1.00 Nuts 20 $5 Onions 4 $3.00 Very long awkwardly named yet still delicious item here 4 $3.00 Carrots 12 $2.99 Total Price $33.79 table border "3" cellpadding "10" cellspacing "0" caption 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" th th align "center" class "col-quantity" th th align "center" class "col-price" th tr thead tbody tr td td td align "center" td td align "center" td tr tr td td td align "center" td td align "center" td tr tr td td td align "center" td td align "center" td tr tr td td td align "center" td td align "center" td tr tr td td td align "center" td td align "center" td tr tbody tfoot td class "price_txt" scope "col" colspan "2" td td align "center" 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. { : ; : ; } { : auto; : ; : collapse; : ; : auto; } , { : solid black; : top; } { : ; } , { : ; } { : ; : ; : (0, 0, 0, 0.4); } { : ; } { : right; : bold; } caption font-size 1.5rem margin-bottom 1.2rem table table-layout border-spacing 0 /* Same as cellspacing="0" */ border-collapse width 450px margin 40px table th table td border 1px vertical-align /* 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 table tbody tr :nth-child(even) td background-color #dcdcdc .price_txt text-align font-weight Rather than, using CSS to adjust the spacing of the table (e.g. ), we already specify it using HTML attributes. CSS box model 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/

Organizing Data In Table: A Quick Guide

Too Long; Didn't Read

Companies Mentioned

@taimoor

RELATED STORIES