Responsive HTML Table With Pure CSS - Web Design/UI Design

Подписаться 6 тыс.

Просмотров 145 тыс.

50% 1

Without using CSS frameworks we'll build *Responsive HTML Table*. So, with pure CSS I'll show you how to create *Glassmorphism Responsive HTML Table*. Let's take UI design to next level.
Subscribe my channel for more helpful videos:
🔔 / @codingdesign
This 🎬video is part of PLAYLIST
▶ • HTML Table UI Design W...
🔗Source Code:
✅ github.com/Jee...
🌎 Browser : Brave V.1.40 (Chrome V.103.0)
📝 Code Editor : VS Code
💠 Extensions : Live-server
#htmltable #uidesign #datatable

Опубликовано:

26 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 106

@sodatta11 9 месяцев назад

Namaste Jeet, I am a backend engineer with 17 years of Industry Experience and I really love your videos. Thanks for sharing your knowledge with us.

@CodingDesign 9 месяцев назад

Thank you! I'll try my best to bring more helpful content in the future too.

@aadilmode7715 14 дней назад

Finally someone who has the skills to do it without any fricking frameworks. Thanks bro for using vanilla js and css

@sanket3236 Год назад

Backdrop filter was awesome bro. Keep putting such videos 🙌

@CodingDesign Год назад

Thank you, I will

@pctechinfosys 4 месяца назад

One of the most precise video with great details of CSS properties, really awesome work with complete clarity

@CodingDesign 2 месяца назад

Much appreciated

@vladimirtravkin4958 10 дней назад

Thank you so much. Easy, accessible, understandable... I get likes and subscriptions.

@stephen1569 Год назад

Thank you for sharing such a creative table solution. Loved it !!

@CodingDesign Год назад

Most welcome 😊

@sonnyreyes8108 3 месяца назад

I love your contents💪😍 Please keep on creating videos like this

@CodingDesign 2 месяца назад

Thanks. But it's difficult to survive in this RU-vid game. I do have very few subscribers and among them only 100-150 subscribers are active one.

@douglaszambrano5644 9 месяцев назад

Absolutely loves it. ❤Keep it up thumbs up 👍🏻👍🏻👍🏻👍🏻

@CodingDesign 9 месяцев назад

Thank you! Hope you'll show your same ❤ & support in the future too.

@francislambert5189 Год назад

Thank you for such a Great and Simple design. Many ways to configure. Peace :}✌

@CodingDesign Год назад

You're welcome. Keep l❤ving & supporting.

@harsh_0031 4 месяца назад

thank you so much!! You made my work a lot easier and saved me a lot of time. 🥳

@CodingDesign 4 месяца назад

Glad to hear that!

@SilviuIT-tn3dn Год назад

sooooo cool video, edit, example, explenation!!!

@CodingDesign 10 месяцев назад

Wow, thanks!

@powerofdiscipline Год назад

Thank you so much for the tutorial i was looking for exactly same thing

@CodingDesign Год назад

Glad I could help

@Sc4ryMonsters 5 месяцев назад

I love your video, it's very useful.

@CodingDesign 5 месяцев назад

Glad you think so!

@uzairmuhammad4871 Год назад

Man i just wonder how to start coding without any tutorials like you , just asking how much is your coding experience brother

@CodingDesign Год назад

I've started my coding journey before 3 years. But I didn't give my 😭100% on Web Development. Within these years I've been trying other stuffs such as: a. 🎬 Video Editing b. 💠 Logo Design c. 🎨Graphics/UI/UX Design d. ✨Animation & many more. You can called me "Jack of all trades, master of none"

@nazmussakib9346 17 дней назад

Loved it bro...❤

@mhdafizhaaw8731 Месяц назад

thanks for sharing.. its so pretty!

@AltaLand2023 8 месяцев назад

Great bro, thanks! Amazing explantion!

@CodingDesign 7 месяцев назад

Glad it helped!

@ashishjangid7845 Год назад

This is very important for me. Thank you 🙏

@CodingDesign Год назад

Glad to hear that

@HyperUpscale 9 месяцев назад

Sweet! That's a perfect tutorial!

@CodingDesign 9 месяцев назад

Thanks! You can provide more constructive criticism for my better content.

@usmanfarismt1074 Год назад

Awesome design..... I followed all the code, but vertical scroll for table body section not working, it remains hidden, while horizontal scroll works properly. What may be the issue..?

@CodingDesign Год назад

As you know I've used 📢_*"Overflow : auto;"*_ so, you have to create enough *_"📈Table Data"_*__. According to my Table's height, if you ➕add more than 7️⃣seven __*_"Data"_* to my table, you'll get that _Vertical Scrollbar_.

@Pihu_Hub 7 месяцев назад

Amazing video Bro. ❤

@CodingDesign 6 месяцев назад

Glad you liked it.

@gastonbuesas2081 Год назад

so good tutorial, nice table

@CodingDesign 10 месяцев назад

Glad you like it!

@huyle5011 11 месяцев назад

How to change the font of the text for specific rows in the table. For example 1 row is a different font and another row is a different font.

@CodingDesign 10 месяцев назад

You can do it easily with ":nth-child()" pseudo CSS class. ⚠ But I recommend not to do so, if you want better UI.

@almirsilva838 11 месяцев назад

Great presentation! Very useful; and a beautiful design. Congratulations!

@CodingDesign 10 месяцев назад

Glad you like it!

@attilaguba856 Год назад

Good design ! But it shouldn't be scrolling horizontal way it's notbthe best for thr user! Check responsive JQuery datatable 😉😊

@CodingDesign 10 месяцев назад

Thanks for the tip!

@epcg2media Год назад

This helped me a lot. Thanks!

@CodingDesign Год назад

Glad to hear it! Hope you'll show your same ❤ & support in the future too.

@codeplayandlearn.7788 Год назад

Thanks for this creative master piece.

@CodingDesign Год назад

Glad you like it! Hope you'll show your same ❤ & support in the future too.

@codeplayandlearn.7788 Год назад

@@CodingDesign sure, l will.

@SilviuIT-tn3dn Год назад

@05:20 you add a background image, how to set my html & css in that way: I want to add 2 images and then the table. In t he end to be same result as yours. ...

@CodingDesign 10 месяцев назад

Do you want your image to be at the "BACK" of Table or just "ABOVE" of it.

@MulMukendi 3 месяца назад

brilliant video man

@CodingDesign 2 месяца назад

Much appreciated

@IsnaReni Год назад

thank you sm

@CodingDesign Год назад

Happy to help

@phonevelarde Год назад

Excelente job. Thanks for shared. You have new sub.

@CodingDesign Год назад

Awesome, thank you! Hope you'll show you same l❤ve & support in the future too.

@SHADEN-oh6vn Год назад

First of all, thank you so much!! is it possible to get rid of the empty area on the right? (the scroll bar area)

@CodingDesign 10 месяцев назад

You can hide scrollbar with display css property.

@marcoagnelli7363 9 месяцев назад

Hi, sorry, I downloaded the folder directly from github, html and css work but it's as if the javascript file doesn't work (the various filters, sorting, search button, export etc. don't work). come, can I solve it?

@CodingDesign 9 месяцев назад

I've done some update. You can check out.

@marcoagnelli7363 9 месяцев назад

@@CodingDesign perfect, it works... for other questions where can I ask you? for example, (I only imported the javascript code), I would like to implement only the search function, I only copied point 1 of the js file but it still sorts the columns that I don't want to have...how can I solve it? what do I have to eliminate from point 1 to not have sorting and only search?

@CodingDesign 9 месяцев назад

@@marcoagnelli7363 Within the code, I've clearly given hints through "comments". But anyway, you just only need "searchTable" function along with used "variables" & "event listener".

@dinatjahanmilitasnim4614 Год назад

This is a really good video

@CodingDesign Год назад

Thank you! hope you'll show your same l❤ve & support in the future too.

@imranbeltran9354 Год назад

I tried this in my browser, greatwork, but i dont know why the table doesnt fill the whole box i just copied the same code as yours but got different results

@CodingDesign Год назад

I've given "Source Code" for this whole ▶ playlist. Please check out video's description.

@ayeshamunshi8043 7 месяцев назад

i am trying to work on the jquery / javascript to tap the row select event, but its not working

@CodingDesign 6 месяцев назад

I'm sorry! I didn't get your question. What are you actually trying to achieve?.

@ayeshamunshi8043 6 месяцев назад

@@CodingDesign row click event, some how I finallyanaged to find the answer.

@zaurhasanov5458 Год назад

Thanks a lot, brother!

@CodingDesign Год назад

Always welcome

@urovincent3868 2 месяца назад

My guy 👍👍👍

@CodingDesign 2 месяца назад

More than happy to help.

@jabarlew 21 день назад

this is not responsive wen on mobile phone you need to scrool to sides to see rest of table

@fikriadnan9784 Год назад

Amazing 👌👌

@CodingDesign Год назад

Thanks 😊

@optobeats Месяц назад

It's not responsive table... Why you think if you add scrollbar it will start be responsive???

@rahmana5813 Месяц назад

Watch whole video in playlist bro

@kulvinder8211 7 месяцев назад

How do I make a table by Google sheet data like this?

@CodingDesign 6 месяцев назад

We can't directly read files using JS unless if you're using other backend technologies. One of the alternative way is to use library: Tabletop.js OR check out this stack overflow link this might help: ✅ stackoverflow.com/questions/70902197/accessing-a-public-google-sheets-data-directly-from-client-side-javascript