How to create a responsive table using HTML and CSS.

Поделиться
HTML-код
  • Опубликовано: 12 июн 2024
  • In this video, you are going to learn how to create a responsive table using HTML and CSS.
    Check out this video
    ▶ Responsive Side Navigation Bar in HTML CSS And JavaScript | Dashboard Sidebar Menu
    • Responsive Side Naviga...
    ▶ How to create a Responsive Admin Dashboard Using HTML CSS.
    • How to create a Respon...
    ▶ How to create a Responsive Image Gallery Dashboard using HTML and CSS
    • How to create a Respon...
    ▶ Responsive side menu design using HTML and CSS.
    • Responsive side menu d...
    ▶ How to create a responsive table using HTML and CSS.
    • How to create a respon...
    ▶ How to create a draggable side menu using HTML and CSS.
    • How to create a dragga...
    ................................................................................
    I hope you will like this Dashboard Sidebar Menu Design. Feel free to get the source code of this Sidebar Menu from the given link.
    www.codewora.com/design/table/
    Don't forget to leave feedback in the comment section
    ................................................................................
    If you like my video don't forget to hit a like and subscribe button.
    ⏱ Timestamps
    00:00 Design Intro
    00:36 Design Setup
    01:34 Table Header
    03:28 Table Content
    10:15 Table Pagination
    12:17 Final intro
    12:54 End screen
    ► Music Credit:-
    Artist: Aakash Gandhi
    Title: Liquid Time
    Download Song: bit.ly/38VXGlx
    Song: Erik Lund - Summertime (Vlog No Copyright Music)
    Music promoted by Vlog No Copyright Music.
    Video Link: • Video
    Song: LiQWYD - Birthday
    Music provided by Vlog No Copyright Music.
    Creative Commons - Attribution 3.0 Unported
    Video Link: • LiQWYD - Birthday (Vlo...
    Song: Xad - Birds (Vlog No Copyright Music)
    Music provided by Vlog No Copyright Music.
    Video Link: • Xad - Birds (Vlog No C...
    ....................................................................
    #table
    #responsivetable
    #HTMLCSS
    #HTML
    #CSS

Комментарии • 31

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

    Nicely done!!

  • @imanmehtari9506
    @imanmehtari9506 2 года назад +2

    Excellent Excellent Excellent Excellent

  • @phonevelarde
    @phonevelarde Год назад

    Excelente sir.. thanks for shared this info.

  • @eknowledge2278
    @eknowledge2278 Год назад

    Good work ♥️

  • @Hariss1311
    @Hariss1311 Год назад

    🔥🔥🔥🔥

  • @gabrielramosrochadel9220
    @gabrielramosrochadel9220 2 года назад

    Good

  • @RanalaManaja
    @RanalaManaja Год назад +1

    Hey . I'm very interested in your design it is awesome . Would you mind if I have a chat with you .

    • @FutureWeb
      @FutureWeb  Год назад +1

      Sure drop me mail
      Codingzone2@gmail.com

    • @RanalaManaja
      @RanalaManaja Год назад

      @@FutureWeb Thank-you very much

  • @touhidrahman9775
    @touhidrahman9775 Год назад +1

    I cant find the download option through the link!

    • @FutureWeb
      @FutureWeb  Год назад

      Sorry due to maintenance. I lost the code for this table design. I tried to find out the code but was not able to find sorry for the inconvenience.

  • @phamhoangtrungk15hcm30
    @phamhoangtrungk15hcm30 Год назад +2

    I don't see source code in descripton. Please give me the link

    • @FutureWeb
      @FutureWeb  Год назад

      www.codewora.com/design/table/

  • @sarahterkmani1894
    @sarahterkmani1894 2 месяца назад

    birru

  • @knuseski
    @knuseski Год назад +1

    This is not a responsive table, you are just adding a horizontal scroll...

    • @FutureWeb
      @FutureWeb  Год назад

      Do you have any idea how to make the table row responsive according to the screen size. If yes please leave a comment. I will try to make table behavior that you want.
      Thanks for your valuable Feedback

    • @simboy
      @simboy Год назад +1

      @@FutureWeb well you can make certain columns hidden when the screen changes or double up rows. i've been hearing that a a scroll bar is unresponsive becoz on a smart phone you cant really scroll thats what ive been picking up in css vids, in other words in such cases @media used to prevent scrolling on the smaller screen sizes?? am i mixed up?

    • @FutureWeb
      @FutureWeb  Год назад

      Double the row may confuse the user. But we can hide the columns based on screen size.
      Thanks @simboy for the valueable feedback

    • @simboy
      @simboy Год назад

      @@FutureWeb im working on a complicated table that fetches data and opens an expanded table for each row, im using react-table but the api is confusing so alot of the funtionality i was coding by hand. >> thats just why i was thinking about these problems, not that im good at css at all. what comes to me is that if you have hidden colums youd probably need a menu component for just small screens, to allow the user to choose which columns to show. i have no idea how scrolling works on touch screens and reponsiveness kind of glosses over these features keeping them more for native apps than a catch-all html/css site serving different screens. im kind of in the dark as to how devs go about coding for smart devices and pcs at that level. as far as i know they dont, and if someone wants all that added functionality you need to make a native app. not sure if css can handle that stuff. id like to think it can. coz it would mean one code base.

    • @FutureWeb
      @FutureWeb  Год назад

      @simboy we can add a menu that is used to hide and show the column in the table. But it required lots of coding effort but it is possible with css and javascript. But in react handling this kind of things are very easy.
      Thanks for the suggestion I will work on that.

  • @roxrox2399
    @roxrox2399 2 года назад

    please give me the code

    • @FutureWeb
      @FutureWeb  2 года назад +1

      Please check the description you will find the link for the code

  • @web_hub
    @web_hub Год назад +1

    source code please

    • @FutureWeb
      @FutureWeb  Год назад +1

      Please check the description section.
      www.codewora.com/design/table/

    • @afrodu7212
      @afrodu7212 Год назад +1

      @@FutureWeb ce lien ne donne pas le code source