d여기에서 CSS로 HTML 테이블 스타일 지정-웹 디자인 / UX 자습서 – table css 디자인 주제에 대한 세부정보를 참조하세요
View the code on CodePen: https://codepen.io/dcode-software/pen/dLVwOY In this video we’re going to take a look at how to style HTML tables using CSS – this is an example of how I like to style up tables, you can easily take this code and then tweak it to suit your needs or own style. Support me on Patreon: https://www.patreon.com/dcode – with enough funding I plan to develop a website of some sort with a new developer experience! 0:00 Overview 0:45 Starting on the HTML 1:40 Styling the table element 3:22 Styling the table header row 4:47 Styling the table cells 5:27 Styling the table rows 7:16 Adding a few extras 9:30 Wrapping up Follow me on Twitter @dcode! If this video helped you out and you’d like to see more, make sure to leave a like and subscribe to dcode! #dcode #css #webdev
table css 디자인 주제에 대한 자세한 내용은 여기를 참조하세요.
html/css로 만드는 table 디자인 샘플
html ⁄ css만으로 디자인한 table 샘플 몇가지를 소개할게요^^. 웹에서 테이블은 정보의 가독성을 목적으로 한 것이기 때문에 심플한 디자인이 될 수 …
주제와 관련된 더 많은 사진을 참조하십시오 CSS로 HTML 테이블 스타일 지정-웹 디자인 / UX 자습서. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
CSS로 HTML 테이블 스타일 지정-웹 디자인 / UX 자습서
주제에 대한 기사 평가 table css 디자인
Author: dcode
Views: 조회수 311,883회
Likes: 좋아요 5,397개
Date Published: 2019. 4. 15.
Video Url link: https://www.youtube.com/watch?v=biI9OFH6Nmg
[CSS] 💍 테이블(table) 디자인 🖌️ 모음
테이블(table) 디자인 CSS 모음
Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 테이블(Table) 디자인 스타일(style) 요소들 모아 간추려 포스팅 해보았다.
급하게 CSS 템플릿을 찾으면서도 모던하면서도 준수한 디자인 예시를 원할때 좋은 참고가 되기를 바란다.
See the Pen Advanced and accessible tables by Germán Freixinós López (@germanfrelo) on CodePen.
See the Pen CSS responsive table with fixed column and row headers and scroll snap by Scott Jehl (@scottjehl) on CodePen.
See the Pen Responsive Table Sass Mixin by Geoffrey Rose (@geoffreyrose) on CodePen.
See the Pen Responsive Table with DataTables by SitePoint (@SitePoint) on CodePen.
See the Pen CSS Responsive Table Layout by Luke Peters (@lukepeters) on CodePen.
See the Pen Responsive Table Solution by Seth Abbott (@sethabbott) on CodePen.
See the Pen Pseudo-classes Example by Shay Howe (@shayhowe) on CodePen.
See the Pen Accordion table by Adam (@adahei) on CodePen.
See the Pen Super simple table by corbpie (@corbpie) on CodePen.
See the Pen Data Table by alassetter (@alassetter) on CodePen.
See the Pen Responsive Table by Trevor Nestman (@FluidOfInsanity) on CodePen.
See the Pen Responsive Table by Jens Grochtdreis (@jensgro) on CodePen.
See the Pen
Responsive by Pablo García (@pablorgarcia) on CodePen.
See the Pen HeavyTable by Victor Darras (@victordarras) on CodePen.
See the Pen Fixed table header by Nikhil Krishnan (@nikhil8krishnan) on CodePen.
See the Pen Responsive Table by Alico (@alico) on CodePen.
See the Pen Pure CSS Table Highlight (vertical & horizontal) by Alexander Erlandsson (@alexerlandsson) on CodePen.
See the Pen Table Styling by Asma Aderghal (@Asma_ader) on CodePen.
html/css로 만드는 table 디자인 샘플
html ⁄ css만으로 디자인한 table 샘플 몇가지를 소개할게요^^
웹에서 테이블은 정보의 가독성을 목적으로 한 것이기 때문에 심플한 디자인이 될 수 밖에 없죠.
거기다 장식할만한 파트도 선이나 배경색, 또는 글자색으로 정해져 있기 때문에 여러 사이트에서 사용하는 테이블 디자인이 매우 비슷한 디자인(색상이 다를 뿐?)으로 되어 있음을 알 수 있습니다.
어쩔 수 없는 것 같아요 ^^;;
그래서, 이번 글에서는 테이블 기본 코드를 몇가지 작성하여, 상황에 따라 조금씩 변형하여 사용할 수 있도록 했습니다. 그 중에서도 아주 심플한, 많이 사용되는 테이블을 소개하려고 합니다.
그냥 마구마구 ctl+c해서 ctl+v 하세요^^
테이블 샘플 코드
외곽선만 사용 심플한 실선만을 사용한 디자인입니다. 요로코롬 심플한 디자인이 변형하기도 쉽지요 ^^ See the Pen jEPJzv by nanati (@nanati) on CodePen.
항목에만 배경색 입히기 + 입체형 항목명에 배경색을 넣고, 회색과 흰색 2가지의 선으로 셀에 살짝콩 입체감을 주었습니다.
색은 심플하지만 납짝한 평면보다는 조금 고급스러운 느낌이 들죠 ^^
심플하지만 많이 쓰이는 스타일입니다. See the Pen wBaOpy by nanati (@nanati) on CodePen.
테이블 왼쪽 선을 굵게 단조로운 색 배합에 살짝 포인트를 주기 위해서, 테이블 왼쪽 선을 두껍게 처리해봅니다.
같은 색으로 항목명의 색을 맞추면 항목명이 강조되어, 더욱 가독성을 높여줍니다. See the Pen yyNwpG by nanati (@nanati) on CodePen.
줄노트 디자인 저엉~말 심플한 줄노트 같은 디자인 타입입니다.
요런식의 테이블 디자인을 사용하는 곳도 꽤 있습니다 ^^ See the Pen raVRpg by nanati (@nanati) on CodePen.
줄노트 디자인 + 항목명에 배경색 넣기 위 줄노트 디자인에 항목명의 배경색을 입체적으로 넣은 타입입니다. 요것도 꽤 자주 쓰이는 표 형식이지요. See the Pen zxGbpg by nanati (@nanati) on CodePen.
짝수 행에만 배경색 넣기 선은 가장 윗선과 아랫선만 넣고, 나머지는 짝수행에 배경색을 넣는 것으로 완성되는 타입입니다.
스타일리쉬한 디자인에, 가독성 또한 좋은 디자인입니다. See the Pen YPXgep by nanati (@nanati) on CodePen.
2way 헤더 기본형 1행에 테이블의 헤더를 넣고, 각 행의 왼쪽에 항목명을, 오른쪽에 내용을 넣는 기본형 테이블 디자인입니다. See the Pen gbpEvx by nanati (@nanati) on CodePen.
2way 헤더 + 라인으로 포인트주기 01 테이블 헤더와, 테이블 전체적으로 옅은 색으로 디자인 한 경우, 헤더부분 밑쪽으로 라인으로 포인트를 주면 헤더와 내용의 경계선이 명확해집니다. See the Pen ByNbYJ by nanati (@nanati) on CodePen.
2way 헤더 + 라인으로 포인트주기 02 위의 디자인에서 헤더의 배경색을 없앤 스타일입니다. 요것도 꽤 많이 쓰이는 디자인이죠 ^^ See the Pen NPqJyM by nanati (@nanati) on CodePen.
2way 헤더 + 짝수행에 배경색 넣기 헤더의 배경색을 가장 진하게 처리하고, 짝수행의 배경색을 그것보다 꽤 옅은 색으로 입히면 되는 심플한 타입입니다. 가독성도 좋아서 많이 쓰입니다. See the Pen jEPJZv by nanati (@nanati) on CodePen.
Top 30 Simple, Yet Beautiful CSS3 Table Templates And Examples 2022
After thoroughly researching free HTML and CSS3 table templates for months, we decided to take things to the next level with our flexible alternatives.
We based these on readability, flexibility, and ease of use. Beginners and pros – you’re welcome.
You will never again need to lack professional data presentation. Keep loads of stats and info more organized with our INCREDIBLY practical free snippets.
And. More. Accessible.
It’s very EASY and FAST creating a modern table using our templates. Thanks to the user-friendly code and responsive layout, you save yourself heaps of time.
Enjoy!
Best CSS3 Table Templates
Fixed Column Table by Colorlib
Here’s a table with a fixed column and horizontal scrolling. If you are looking to avoid the building of a table from the ground up, feel free to get your hands on this remarkable alternative instead.
For everyone searching for something DIFFERENT, this is the ideal design that will do the trick. Use it for displaying statistics or any other data and information you would like to share online.
Download
Preview
Fixed Header Table by Colorlib
In this case, we have added a fixed top row for each table that remains in place on the scroll. You can further tweak this idea to get the results you were looking for.
Please do if you want to brand any of the two table designs. You can change the color and make them follow your regulations precisely.
These support MANY different aims and intentions, catering to various purposes. Create a timetable for your classes or share other information; anything is possible.
Download
Preview
Table With Vertical & Horizontal Highlight by Colorlib
These HTML5 & CSS3 tables come with highlights for both vertical and horizontal rows. We made sure to have several different variations, so you can choose the one that works the best for you.
Instead of one, you get a WHOPPING collection of six nifty alternatives completely free of charge.
Hit the download button, and you can already start using these tables with your web applications. Tailor them to your style precisely.
There are such with solid color and such with a gradient effect and round and sharp edges. Present the information on your page stunningly with little to no work.
Download
Preview
Responsive Table V1 by Colorlib
Responsive tables have always been a huge problem because you cannot resize them to a certain point to make them useful.
Not anymore.
These HTML/CSS tables will work well on any mobile device. Whether it is Table V1 by Colorlib or any other product on this list, the performance will be TOP-NOTCH across all devices and platforms.
Enjoy the catchy, yet simplistic design and make the table yours with a click on the button.
Use it for orders, pricing, schedules, you name it. You have many options and possibilities as long as you DO NOT limit yourself.
Download
Preview
Responsive Table V2 by Colorlib
This is a similar HTML/CSS table template to the previous one due to its clean, modern and creative appearance. Instead of overcomplicating things, stick to the minimal design. You have a guarantee that everyone will enjoy your content to the fullest.
The same applies to the table templates. Why complicate things if you do not have to?
The table features a responsive layout that instantaneously adapts to smartphones, tablets and desktop computers. It also rocks a nifty hover effect that only spices things up for your convenience.
Let the table do a significant part of the work for you while you ONLY FOCUS on refining it.
Download
Preview
Table V01
Table V01 is clean and to the point.
This free snippet will surely do the trick if you are particularly after a SIMPLER presentation of users.
The template also rocks a basic design with a blue banner, which you can alter to your needs and regulations.
Since a Bootstrap table, it also operates on different screens flawlessly.
Table V02
To some extent, Table V02 is pretty similar to Table V01, but it comes with an extra feature.
It includes an X sign that – OF COURSE – allows you to delete the entire row with one click. But the row you delete cannot come back if you change your mind.
Be. Careful.
If you view Table V02 on mobile, it comes with horizontal scrolling, keeping the LAYOUT INTACT.
Table V03
We also wanted to cover web HOSTING and DOMAIN registrar companies, thus created Table V03.
It’s a modern CSS3 table template with multiple rows for TLD, duration, registration, etc.
One practical feature of Table V03 is the sign-up button that each row sports so that the user can act on the spot.
And if you would like to change colors and other details, you can do that at free will.
Table V04
No matter what classes you organize, Table V04 is here to sort you out an ONLINE SCHEDULE shortly. Fitness studios, gyms, yogis, you name it, Table V04, is here for everyone.
It features a weekly schedule, which you can use for the entire month – with images, the name of the class, and time.
You also find buttons for the next or previous month. But that’s something you need to invest some extra time to activate.
Table V05
Table V05 is a free CSS3 table template based on Bootstrap to ensure an excellent experience on different devices.
It WORKS GREAT for freelancer apps by default, but you can even apply it to something else.
Some of the features include a checkbox, avatar, status username and an option to delete the user/row.
Table V06
As the screenshot shows, Table V06 is our shopping cart table with different options. You can use it with any E-COMMERCE website or ONLINE STORE you would like to build since it is easy to integrate.
Table V06 includes checkboxes, quantity selection and an X button for erasing an item. The table can show the product image, name, more details, and the price.
Table V07
If you DIG DARK, you will dig Table V07.
Even though a basic CSS3 table template like Table V01 does a great job displaying first and last name plus email.
The only other feature that Table V07 sports is a hover effect. Other than that, it’s a responsive design that offers SMOOTH operation.
Table V08
You often want to add some more information to the table, but it can easily overwhelm the user.
Luckily, we have a SOLUTION for that.
Table V08 is a simple Bootstrap table with a gree down arrow at first glance.
Once you click it, the accordion reveals an additional section where you can share EXTRA information about the product.
Table V09
To see the status of orders, it would be ideal to have all your users/customers displayed in a neat table.
You can do that with Table V09.
The template comes with SEVERAL ROWS for invoices, customers, location, pricing and status. The latter includes three different buttons in three different colors for “progress,” “open” and “on hold.”
No need to question if it fits mobile devices because IT DOES.
Table V10
Table V10 is an EXTRA colorful CSS3 table template that costs you nothing.
While this may be a MORE exclusive template that suits a specific userbase, those who do like it will have A LOT OF FUN using it.
There are five rows and six different colors with an edit icon on the far right. Straight. In. Your. Face.
Table V11
For a table with a minimalist design, that’s when you opt for Table V11.
It’s super clean with a mobile-friendly layout, five columns and a checkbox section. The latter even comes with an option to SELECT/DESELECT all.
That’s pretty much it!
Now it’s your turn to hit the download button and benefit from Table V11’s beauty.
Table V12
Yes, we can go EVEN MORE minimalist than the previous CSS3 table template – meet Table V12.
It is a great example of how you can stick to simplicity even though you may have a lot of stuff on display.
Table V12 includes a hover effect that highlights the entire row. This way, you can quickly check what’s up with different users.
Not MIXING things up!
Table V13
If you like Table V11 but wouldn’t mind if it had a hover effect, you are in luck.
Instead of configuring V11 to your liking, opt for Table V13 and make it happen quicker.
Not only does it rock the hover effect, but once you tick the user, it stays in this hover/highlighted state.
You can even SELECT the ENTIRE LIST with a single click.
Table V14
Table V14 is a modern Bootstrap table template for displaying different USER information. You can use it for occupation, contact and education that you need besides their order.
This can work great if you sell courses, even software or something else.
Each row comes with a clickable name and a checkbox. Also, the spacing between rows and rounded edges makes Table V14 VERY appealing to the eye.
Table V15
Table V15 is a slight variation of Table V14, including a background and a CLICK EFFECT that dims the row once you tick it.
This gives it a better view of the next action you need to take for a particular user.
Design-wise, V14 and V15 are the same, with rounded corners and spacing between rows.
Table V16
Instead of creating a dark table from scratch, you can always choose Table V16.
This free CSS3 table template lets the user IMMERSE in the content WITH EASE.
Since reading content as-is would be challenging, we added a hover effect that brings out the row. It turns the text white and yellow.
You will also see “details,” which you can use to link to another section of your website or application on the far right.
Table V17
Table V17 takes things ONE STEP FURTHER with checkboxes and switches/toggles. The latter even has a cool animation that only spices things up.
You can utilize Table V17 for many different activities, either using it out of the box or improving it further.
It’s just a click away, READY for you to put it into play.
Table V18
I’ve featured a couple of our dark CSS3 table templates already, but here’s another, MORE ADVANCED version, if you will.
CSS Table V18 is comparable with some lighter alternatives, but we just wanted to make it dark, so you can USE IT out of the box.
There’s also a hover effect and a checkbox that keeps the highlight live once you tick it.
Table V19
Table V19 is a remarkable free table template based on Bootstrap Framework for sales teams to keep everything EXTRA organized.
The snippet includes avatars, four main columns, checkboxes and a hover effect.
The table of contents works on different screen sizes without a hitch. However, you need to scroll LEFT or RIGHT on mobile to see the entire table.
Table V20
Table V20 is a mixture of goodies for ACTIVE and INACTIVE rows. The background color of rows also changes between gray and white. It ensures the user a better experience reviewing details.
To make the row go from active to inactive and vice versa, you need to click on the green toggle.
Note, just like you can tick all rows with a single click, you can turn them all active or inactive with a click.
Bonus CSS3 Tables
Bootstrap CSS
Bootstrap is the most famous front-end development framework on the planet, it’s being used everywhere; well, almost!
TABLES INCLUDING.
Bootstrap helps front-end devs to rapidly build websites without having to invest much thought into the process of making something look pretty.
Every element is already pre-determined, and all you have to do is allocate the positioning, and maybe change the colors up a little.
Download
Adaptive Pricing Table
If you are a freelancer, an agency, a software company, or even a web hosting firm, you want to add pricing tables to your website.
Here is a modern, clean, and easy-to-use free CSS3 pricing plans table to get things rolling.
Play around with its features and ideally create an outcome that fits your website. Change texts colors and improve overall appearance accordingly.
However, even if using it as is and editing details only, you are ready and set to keep things at the PROFESSIONAL level.
Push your packages and let everyone know what they can expect after taking the plunge.
CSS3 Pricing Table
Tables aren’t just for data. Not always.
Sometimes we need table solutions for things like displaying pricing. This CSS3 Pricing Table template from Allen Zapien is an excellent example of how you can use CSS3 to display various content in many beautiful ways.
You can outline the most SUCCESSFUL pricing module with an in-built outline template. Of course, you can QUICKLY perform changes to make the table more suitable for your design.
Download
Nutrition Facts Table in HTML & CSS
Pricing tables, data tables, dynamic tables, there are SO MANY ways to use tables. One more to add to the list is the following template.
A table data template for displaying nutrition facts for literally any food item.
Of course, adding each of the facts standalone could take up some time, even to report all the existing fruit.
We HIGHLY RECOMMEND taking this template and integrating it within your existing platform that requires output nutritional information for products.
Then filter all your data through this template to provide a REMARKABLE experience for anyone looking it up.
Download
CSS Styling Tables
CSS Tables
The look of an HTML table can be greatly improved with CSS:
Company Contact Country Alfreds Futterkiste Maria Anders Germany Berglunds snabbköp Christina Berglund Sweden Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading Helen Bennett UK Königlich Essen Philip Cramer Germany Laughing Bacchus Winecellars Yoshi Tannamuri Canada Magazzini Alimentari Riuniti Giovanni Rovelli Italy
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a solid border for
,
, and
elements:
Firstname Lastname Peter Griffin Lois Griffin
Example table, th, td {
border: 1px solid;
} Try it Yourself »
Full-Width Table
The table above might seem small in some cases. If you need a table that should span the entire screen (full-width), add width: 100% to the
element:
Firstname Lastname Peter Griffin Lois Griffin
Example table {
width: 100%;
} Try it Yourself »
Double Borders Notice that the table in the examples above have double borders. This is because both the table and the
and
elements have separate borders. To remove double borders, take a look at the example below.
Collapse Table Borders
The border-collapse property sets whether the table borders should be collapsed into a single border:
Firstname Lastname Peter Griffin Lois Griffin
Example table {
border-collapse: collapse;
} Try it Yourself »
If you only want a border around the table, only specify the border property for
:
Firstname Lastname Peter Griffin Lois Griffin
44 Best CSS Table Templates For Creating Appealing Tables 2022
Tables are one of the most common elements used in almost all websites. But it is also one of the most commonly overlooked elements while developing a website. Until a necessity comes we won’t remember that we need to add a table. We on this list have collected some of the best CSS table templates that you can customize easily and use in your existing website or ongoing projects.
CSS table is a broad category, the tables are used for different purposes. The main purpose of it is to show a list of data. If you are making a table template for a stats-rich website, make sure you have horizontal and vertical highlighting options. In this CSS table templates list, we have also included templates that have highlighting and scrolling options. Another form of table template which is widely used is pricing tables. In this list, we have also included templates for pricing tables. All these CSS table templates use the latest CSS3 version so you get more natural colors and responsive animation effects.
Here are the simple and stylish CSS table templates you can use on your website and application.
Stylish CSS Table V04
As the name implies, this one is a stylish CSS table design for weekly schedules.
If you are looking for a clean CSS table to show your weekly schedule like yoga classes, online courses, or any other similar thing, this calendar-style CSS table will be a good choice. The creator has used images and bold texts to clearly show the entries for the particular day of the week. You have navigation arrows at the bottom of the table to jump to the next & previous months.
Info / Download Demo
HTML & CSS Table Style V06
In the V06 CSS table template, you get a clean and interactive table design for an eCommerce cart.
This table’s borderless design gives a tidier look; the user can also quickly see the entries without any issues. Checkboxes and text boxes are also given in this template to make the interactions easier. Basic functionalities are taken care of by the developer; therefore, you can concentrate on the custom features and optimizations to make this table fit your needs.
Info / Download Demo
CSS Table Templates V09
The V09 CSS table template will be a perfect fit for admin-related works. Admins can quickly organize the entries because of this template’s clean layout and colorful buttons. The creator has given us a concept model, so the buttons don’t have any functionalities in the default design. But, the simple code structure gives you enough room to add your custom elements and features without much effort.
Info / Download Demo
CSS Table V10
The V10 is also similar to the V09 template mentioned above. This template uses different colors for each row to make it easier for the users to read the information. None of the elements are clickable in the default design. You can add sort functions and options to edit the entries to make the table even more friendlier for the audience/ table users. The V10 is a mobile responsive CSS table, which might be an advantage for developers making apps compatible on both small and big screen devices.
Info / Download Demo
Fixed Column Table
It is not always possible to show all the data and stats in a single table. We have to provide scrolling options to help users see the complete record. This CSS table template gives you that option out of the box. As the name implies it has a fixed main column and all other related fields can be scrolled horizontally. The developer has given you ample space in the column to add even longer contents without any trouble. Since this template uses HTML5 and CSS3 frameworks, you get more natural colors and a mobile responsive table. If you need to add more rows, you can add them easily, this table template can handle it.
Info / Download Demo
Fixed Header Table
Fixed Header Table is a package of five CSS table templates. With this package, you get different color options and style options, making this table package unique. All five variants have a fixed header and obviously, you get a vertical scrolling option. Another fun part of this table package is you get a dark-themed table to satisfy black color enthusiasts. All the templates don’t have a column border, so you get plenty of space to add longer contents. At the same time, the column adjusts themselves so you won’t have a clumsy look with this table template.
Info / Download Demo
Table With Vertical & Horizontal Highlight
When there is a data cluster, it is always difficult to pinpoint a value. If you are a data analyst who spends most of your time in excel sheets, you will know the difficulty of finding a value, you have to recheck the rows and columns quite often. The developer of this table template given us a solution for this issue using the interface design. This template highlights the column and the row you are hovering, so you can easily cross-check the value you want. It is a minor thing, but when you do lots of excel work, this highlighting option will save your time.
As a package, the developer gives you six table templates, all six have different designs. Since this template uses the latest HTML5 and CSS3 frameworks you get more modern-looking templates, even you get a table template with a gradient color scheme in this package.
Info / Download Demo
Responsive Table V1
Responsive Table V1 is a simple table template. As the name implies it is a responsive table template. So you can add any number of tables and columns, the table will adjust automatically. To differentiate each row, a white and grey pattern is used. This template uses HTML5 and CSS3 frameworks, editing and working with this template will be an easy job for the developers. This template does not support scrolling options. You can use the CSS table templates with scrolling options mentioned above if you need one. For the demo purpose, a gradient color background is used, based on your design need you can customize or use the table alone on your website.
Info / Download Demo
Responsive Table V2
Responsive Table V2, as the name implies it is another version of the responsive table template mentioned above. This template is also from the same creators of the version one template mentioned above. The version two template is a simple and clean-looking template, on the neat white background, the texts are legible and easy to read. Hover effects help you identify which field you are currently viewing. Like most other free CSS table templates mentioned above, this one also uses a borderless design for columns. Since the fields adjust smartly you needn’t worry about the overlapping of texts and miss alignment. Overall the version two template is a clean and easy-to-use table template that fits in well with any type of website.
Info / Download Demo
Pure CSS Table Highlight
Pure CSS table highlight is another vertical and horizontal highlight table template. But with this template, you get only one template. The code used to create this awesome-looking table is shared with you directly by the creator. Since the developer usedCodePen interface you can see a live preview while editing the template. For the demo purpose, the developer just created a 5×5 table, but you can add as many rows and columns as possible.
To differentiate the heading section from the rest of the cells, a dark highlighter is used, based on the color scheme you can easily customize the skin of this table template. Unfortunately, this template is not a scrollable table template if you need one you need to make it scrollable manually. If you just need a static table template, you can this table template without any changes.
Info / Download Demo
Bootstrap Table Template
Bootstrap DataTable template has a colorful and functional table design. The use of light and dark colors alternatively makes the interaction easier for the user. All basic elements are there in this template, and all of them are placed at appropriate places; hence, users can easily navigate throughout the table. The entire code script is shared with you on the JSFiddle editor; you can edit and visualize the results on the code editor itself.
Info / Download Demo
Add Rows to Table
If you want a table with an option to add and delete rows easily, this CSS table template might come in handy. With just a click of a button, you can quickly add a row and delete it. The creator has kept the row adding and deleting action as simple as possible, so the uses will find the table easy to operate. The only thing you have to keep in mind in this template is the default two rows can’t be deleted; you can change this by adjusting the code a bit.
Info / Download Demo
Responsive Table CSS
As the name implies, responsiveness is the key highlight of this CSS table template’s code script. Design-wise, the creator has kept the design very simple and neat. The use of shadow effects to highlight the rows is a thoughtful touch. Users can easily read and interact with the table entries. Since it is a responsive table CSS design, accessing the table on the small screen devices will be an easy job. This template’s code script is clean and simple, just like its design; therefore, using this code script will be an easy job for the developers.
Info / Download Demo
Fixed Table Header
Fixed Table Header, as the name implies this template is a vertical scrolling one. This table matches the trendy website design practice with the fresh gradient color scheme. Thanks to the latest CSS3 framework, the colors look more natural and the animations sleek. The only small bummer with this template is it doesn’t support hover effect out of the box. Font selection is also done neatly on this template, the texts are light and easy to read. It might be difficult to identify on which field you were last viewing. The Fixed table header is a fully functional CSS table template from the front end. By keeping this template as a base you can create your own custom tables in no time.
Info / Download Demo
David Kern HTML5 Table
Just like the design, the code structure of this table design is also simple and clean. Not all tables have the same sections and rows. Some times we have to make subdivisions under the main section. If you have any special table design like that, CSS table templates like these will come in handy for you. Apart from the unique sectioning, this table template doesn’t have any interactive elements or hover effects. Since this design is made only using the HTML5 and CSS3 script, you can easily work with this template and add the functions you want.
Info / Download Demo
Simple Table Concept
The developer Sdhnik has given a simple table design in this example. The clean design of this table makes it a good option for mobile application table screens. Alternate light and dark row colors clearly distinguish each row entry. Plus, it avoids table grids and makes the table look less bulky on the small screen devices. A call to action button and a dismiss button is given in the default design. Since it is a front-end concept, the creator hasn’t concentrated on the functionalities. By keeping this design as a base, you can create your custom table in less time.
Info / Download Demo
Dynamic Background Tiles
CSS table templates like this will be a good option if you are making tables to handle large data and let the user easily understand the categories. In this example, the creator has used gradient color schemes and given a key at the bottom, indicating the allotted percentile for each color. Hence, users can easily understand the category from the color cell color itself. The creator has not given any options to change the colors and enter any value. So you have to work by yourself to make it a truly dynamic table.
Info / Download Demo
Flat University Timetable
As the name implies, it is a flat-style table template. The creator has used classy design effectively to make a user-friendly table. Hover effects are used smartly to give tooltips and short notifications. If you like to make the tooltip animations even more engaging, take a look at our tooltips CSS design collection. Since it is a timetable concept, different colors are used effectively to organize related content. If your requirements are less or you have a fixed schedule for all weeks in the month, tables like this will be a good choice.
Info / Download Demo
Responsive Table
The Responsive Table has given you a neat modern-looking table. Colors and neat typographies are used effectively to present the content neatly to the user. Since this table is designed to manage user data, you have space to add the user’s profile picture in a column. All elements in this template are purely made for design purposes, so you can’t interact with them. You can take the front-end code and use it as a base to create your own custom table. Since it is a responsive table, your mobile-responsive design work will be easier with this template.
Info / Download Demo
Angular Material Table
You can understand from the name itself that this is a material design-based table. The creator of this template has given useful features like sorting and search options. An ample amount of space is given between each column so you no need to worry about long texts. But it is better to add auto adjust character to the table. The developer has shared the entire code used to make this material design table. Hence, you can easily work with this design and tune it as per your needs. Apart from the sorting and search options, this table also has a pagination option to navigate between the pages easily. If you like to add your own unique touch, take a look at our free pagination design collection. Overall, the Angular Material Table is one of the best material design CSS table templates.
Info / Download Demo
Angular JS Filter Table
This table design is also almost similar to the Angular Material table design template mentioned above. But, this one is very simple and doesn’t have colorful vibrant colors of the material design. All the basics are done properly in this template so you can concentrate on other features you need in your table. In this template also you get an active search bar that shows relative contents rapidly as you type in the words. For more search bar designs, take a look at our Bootstrap search box design collection. The entire code structure used to create this design is shared with you on the CodePen editor. Hence you can customize and see your work in the editor before implementing it on your website.
Info / Download Demo
Slick Tables
Slick Tables has a neat colorful table design, but it doesn’t have useful options that you have seen in the Angular tables mentioned above. It has basic options like hover highlighter and neat segmentations. Even you have the option to dim down the data that are expired. If you are making a table that shows real-world data, CSS table templates like this will come in handy for you. For handling dynamic contents and manage data easily, we have made a separate post for the Bootstrap Data table. Look at it to find tables with useful options and even chart designs to visualize the data.
Info / Download Demo
Comparison Table
This one is a pricing table comparison design. The long table design allows you to add all the important options so that the user can easily compare the plans before choosing one. This template lets you easily highlight and show the best plan to the user. If you like to make the special plan even more appealing to the user’s eyes, take a look at our CSS Ribbon design collection. In the default design, the letters are made bigger and bolder so that the user can easily see the contents in the table.
Info / Download Demo
CSS Table
CSS table is an intuitively designed table template. The developer had used the given space elegantly with the help of modern CSS animation effects. In some reports you have to be more elaborate about the stats you shared in the table, the rows in this table template expands automatically to help you add a small note about that particular row. To help you organize the related contents effectively color codes are used. The vertical color label at the end helps you to group the data for later reference. In the demo version, this template does not support filter options, when you add filter option this color grouping will give a nice visual appearance and it will be easy for the users to find the dataset easily.
Info / Download Demo
Pricing Table UI
As the name implies this template is actually designed for the pricing table. Instead of following a traditional grid layout, the creators of this template choose a card design approach. With trendy gradient colors and icons, this table fits well with many modern websites templates for travel agencies, startups, and other online service-providing websites. The developer used the latest HTML5 and CSS3 framework to create a visually attractive table template. Colors and the animation effects used in this table template are more natural and will meet the modern user expectations. Overall the Pricing table UI is a perfectly working template from the front end. If you are an app developer and constantly seeks modern UI elements, check out our UI kit collection.
Info / Download Demo
Codrops Pricing Tables
The creators at Codrops has given you a set of pricing tables with innovative designs. As a package, this kit has twelve pre-made pricing tables. Each table has its own unique design and elements. Some of the pricing tables have cool effects and some have a clean design. Based on your need you can choose the one that fits you. The core file used to create all these beautiful pricing tables is also shared with you so that you can easily customize or integrate the pricing tables in your project. The animation effects are very subtle, yet very captivating; in other words, you can say it is simply elegant.
Info / Download Demo
Codyhouse Tables
Subscription plans are becoming popular among many services providers and SAAS companies. Lots of subscription models are given for the users to pick the one that suits them better. The most commonly used models are monthly subscriptions, yearly subscriptions, and lifetime access. The discounted price is the biggest difference the users can visually see in the yearly package. The Codyhouse Tables has three pricing tables with the option to switch between monthly and yearly subscription. Card flipping animation and switching effects are clean and smooth. The only thing you need to add to this template is to show the people how much they save in the yearly plan. You can either show the discounted price by striking the original price or can show two months free; the choice is yours.
Info / Download Demo
Flat Pricing
Flat designs combined with trendy visual effects makes your website stand unique from your fellow competitors’ sites. With blunt edges and bright colors, this table easily fits in any creative website and agency website. The table is long enough to list the key feature of each plan. In the top, you have space for tags. You can use the tags to show the plan name and mark the latest plans. Zoom effects are used when the user hovers over the table. Call to action buttons are placed at the footer of each pricing tables so that the user can easily go to the corresponding page or the payment page. Since the base coding is shared with you directly you can use them to edit and customize the table to your taste easily.
Info / Download Demo
Flip Pricing Table
This table is almost similar to the Codyhouse template mentioned above, but, this one is a more simplified version. It has only one table variation in its design. Visual effects and the transition effects are almost similar to the Codyhouse. This kit will be more useful for beginners and small projects. If you are a beginner, take a look at our free simple CSS website template collection for easier customizations. The designer of this pricing table has used the latest HTML5, CSS3, and a few lines of Javascript. The whole coding is shared with you directly, you can change it in the editor and can visualize the results directly.
Info / Download Demo
Bulma Pricing Table
The pricing tables need not be designed in vertical boxed always, you can try something different. Three types of pricing table arrangements are given in this package and each has its unique style. All three uses the same flat style design with a flat color scheme. The only variation is the arrangement of the pricing table and its elements. Creators of this template have given you a clear documentation so that you can easily customize and work with the elements. By adding a few more interactive animation effects will make this table kit a perfect option for modern websites.
Info / Download Demo
Responsive Table Design
Responsive Table Design is a clean looking pricing table, which can be used for both websites and mobile applications. If you are a mobile app developer, look at our free UI kit list for high-quality mobile app kits and web application kits. Coming to this pricing table, the design is kept very simple to incorporate this table in any type of websites and applications. Most modern web designers indirectly promote elements to the user. In this table, the pricing table is differentiated by a shadow effect. You can use this design to promote the best plan for your services. The CSS file used in this template is given directly to you. You can customize the color scheme based on your design needs.
Info / Download Demo
Pricing Table
Pricing table is a colorful CSS table template. The designer of this template has kept it simple with almost zero visual effects. Since this template uses the latest HTML5 and CSS3 framework, you can add the effects you like. All the tables are arranged side by side so that the users can easily compare the features. Ample amount of space is given between each text line so that the user can easily read and interact with the tables. Call to action buttons are placed at the footer, to make it look different from the other flat elements, hover effects are used.
Info / Download Demo
Simple Pricing Table
Simple Pricing Table is a clean looking table template. The creator of this template follows a more artistic approach. The pricing table you have seen above is full of colors, this pricing table has a simple design with neat white background and line vectors. The line vectors used are customized to meet the overall design of this template. On the clean white background, the light blue color scheme of the template looks professional and also made readability easier. Each row in the table is separated by lines with light stroke weight. Bold texts are used to highlight the important points.
Info / Download Demo
Bootstrap Pricing Table
Bootstrap pricing table is a business class pricing table template. There are chances you might have seen similar pricing table design in many business website templates. Most online service providing sites has a highlighted pricing table to promote the best selling package. With this pricing table template, you get a highlighted pricing table out of the box, where you place the highlighted pricing table purely depends on you. Most sites place the featured pricing model a the center, while some premium customer focused sites prefer placing the features pricing table at the corners. Do an A/B testing on your site to know which model works better for you. With the neat bold texts, you can highlight the best features in each pricing model.
Info / Download Demo
Adaptive Pricing Table
Adaptive pricing table is an animation-rich pricing table. Visual effects are another tool which developers use to get user attention on the required elements and sections. Design wise this template follows a simple usual design. With neat white background, the texts are easy to read and the colorful elements like call to action buttons and badges look attractive. Visual effects are the place where this template really stands out from the crowd. The developer had made use of the latest CSS3 framework to give you a lightweight animation rich pricing table template. If you are looking a pricing table for an interactive website template, then this is the best option for you.
Info / Download Demo
Hosting Pricing Table
If you are having more than one plans to offer, then this is the table template for you. When you offer more packages the design of the table should help the compare the pricing easily. Even if you give a separate compare option, the pricing table should help the user to understand the basic difference between each plan. This pricing table is designed in a neat way so that the user can get an overview of the plans at a glance. Gradient colors are used for hover effects, if your website uses different color scheme you can customize it easily. This template uses latest HTML5 and CSS3 framework, so editing and integrating this template to the existing website will be an easy job.
Info / Download Demo
Tab Pricing
Tab Pricing is a unique table template in this list. Instead of following traditional design and interface, this developer tried a different approach. Card like tabbed interface is followed in this template, images are used to indicate the category. To give better readability over image background white color overlay is used. Even this template is designed for pricing table, this can be used for other types of table purposes, in which you need to arrange lots of tables based on their category. This creative table template can’t be used in all sites, but if you are looking for something creative, this Tab pricing table template will impress you.
Info / Download Demo
Fitness Pricing
Fitness pricing, as the name implies this CSS table is designed specifically for fitness websites. Health and fitness websites are the second most successful businesses to implement the membership system. The subscription model varies from per month to lifetime access. To explain all these pricing model to the users is quite a difficult job. But with this pricing table template, you can clearly highlight the benefits and unique features of each plan to the users.
Another advantage of this template is, it is mobile responsive out of the box. The table is made large enough to add it easily to the website sections easily. Animation effects are simple and clean if you need something more interactive you can customize it by yourself. Since this template uses the latest CSS3 framework, customizing this template will be an easy job. If you are running an online membership site, take a look at our dashboard template collection to manage users easily.
Info / Download Demo
Pink Pricing Table
Pink Pricing table is another simple looking CSS pricing table template. This is a very basic template which gives you only the framework or outer skeleton of your design. You have to develop your own custom table by keeping this template as a base. As the name implies, this template uses pink color as the default color scheme, giving this template a pretty look. Shadow effects are used to highlight and show the pricing table from the background and rest of the design. Below the pricing table the call to action text is given as just a text link, if you are about to use this template for professional sites, you might need to work on this text link alone. It is also properly developed and a complete HTML and CSS table outline.
Info / Download Demo
Diamond Pricing Table
Diamond is a perfect table template for startups and modern websites. With the neat transparent content blocks, this template improves the readability of the texts without spoiling the visual aesthetics of the design. Another unique feature of this pricing table is it has star rating in each pricing table. Ratings and reviews will help the user to choose the better plan, if you are running a restaurant website you must know how an online review will boost your business. Bold texts are used to highlight important points and call to action buttons are provided at the end of each table to take the users to the checkout page easily.
Info / Download Demo
Slide Pricing Tables
Slide pricing table is a multipurpose CSS table template. The default design of this pricing table fits in well with both website design and mobile application design. This one is also animation rich pricing table template. Since this template uses automatic transition, slide indicator is given below to help the user to switch between tabs easily. Long pricing table gives you ample amount of space to mention about the features and also give a short intro about the plan. Call to action button is given at the bottom of the pricing table to take the user directly to the payment gateway.
Info / Download Demo
Dark Sliding Tables
The dark sliding tables is another version so sliding pricing table mentioned above. But this template uses different visual animation effects and layout design. As the name implies this template uses a dark theme. Instead of providing separate table layout this template uses a static table layout and within the layout the table changes. The transition effects are sleek and quick. Different color texts are used to highlight important points. To match the dark theme of the template, the fonts used are also neat and elegant. Small animation effect detailing makes this template unique in this CSS table templates list.
Info / Download Demo
Spa Pricing Table
Spa pricing table is an elegant looking CSS table templates. With the neat transparent tables, this template gives you a visually appealing design. In the demo version, automatic transition is used like in the carousel section if you need you can customize it to fit the overall design of your website template. This template also uses the latest HTML5 and CSS3 framework, like most other CSS table templates mentioned in this list. Out of the box this template is also made mobile responsive, so you can add this template to your mobile responsive website without any issues.
Info / Download Demo
Responsive Table
Responsive Table is a simple colorful CSS table. The creator of this table has used modern colors to make the table attractive. Ample amount of space is given between each column and cells. The user can easily read and interact with the contents on the table. As the name implies, this is a responsive table so it easily fits on all screen sizes. Plus, you can use this design on your responsive web design. The developer has used the HTML and CSS code alone, hence you can work easily with this table design. If you are looking for modern colorful easy-to-work table design, CSS table templates like this will make your job simple.
Info / Download Demo
CSS / 표(table) 꾸미기 / 테두리 만들기
테두리 만드는 속성
테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다.
기본 모양
아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다.
CSS
Lorem
Ipsum
Dolor
Lorem
Ipsum
Dolor
Lorem
Ipsum
Dolor
Lorem
Ipsum
Dolor
Lorem
Ipsum
Dolor
Lorem
Ipsum
Dolor
표에 테두리 만들기
table 요소에 테두리를 만들면 표 외각에 테두리가 생깁니다.
셀에 테두리 만들기
th, td 요소에 테두리를 만들면 각 셀에 테두리가 생깁니다.
빈 셀에 테두리를 만들고 싶지 않다면 empty-cells 속성을 이용합니다.
테두리 사이의 간격을 없애고 싶다면 border-collapse 속성을 추가합니다.
테두리와 내용 사이의 간격은 padding 속성으로 정합니다.
가로선만 있는 표 만들기
세로선 없이 가로선만 만들 때는 다음과 같이 합니다.
양 끝에만 선이 없는 표 만들기
왼쪽과 오른쪽 양 끝에만 선이 없는 표는 다음과 같이 만듭니다.
Table CSS Creating beautiful HTML tables with CSS
It’s easy to make your HTML tables look great – in today’s post, we’re gonna take a look at around 30 lines of CSS to do just that!
Video Tutorial
Before I get into it, if you prefer this tutorial in video form, you may watch it on my YouTube channel, dcode, right below.
Writing the HTML
Let’s write some boilerplate HTML code for the table.
Name
Points
Dom
6000
Melissa
5150
Enter fullscreen mode Exit fullscreen mode
Notice we have two classes:
.styled-table so we don’t tamper with every
on the site
so we don’t tamper with every on the site .active-row which will be the “active” row – this class is used to highlight a specific row and will get it’s own CSS as we’ll see soon
Add a bottom border to each row for separation Add a lighter background to every second row to help readability Add a dark border to the very last row to signify the end of the table
This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Strictly Necessary Cookies
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.
