DEV Community

somtobiotech
somtobiotech

Posted on

1

STYLING DATA TABLES

How To Style Data Tables

  1. The First row uses the earth table header elements the rest of our table the actual data in our table uses td for table data. 2.Then We begin by targeting these elements over in our CSS then we create a new area or create a comment. 3.Table style within any table element, look for the table header elements and let's it override their text-line to be left. 4.We will want to give the table header an alternate background color so that it stands out from the actual data in the table. 5.So to do that within the same wheel will say background color then, I will paste in the hexadecimal color code for a green that we are using elsewhere on the page. 6.Then you will make the text white, and let's also gives it a text shadow so it pops. 7.You will then not want any blur on the shadow and we will use a transparent black value. 8.Then next we add a border around each table header element and each table data or cell. 9.So to do that we are going to want to select both the table header elements comma. 10.Let tack on another selector and all of the tv elements border, so we want a border on all for concerns. 11.The top, bottom and left, we want the border to be one pixel thick. 12.We want it to be a solid line, we don't want it to be dotted or dashed. 13.And we want to use a color that same green value color.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay