Tables colpsan rowspan vs Div in a responsive layout

Hi all
I am new to web design and was wondering can you use tables in a responsive layout?
All I need is a website layout that you can view in a tablet and PC for I've already have a mobile site
Thanks everybody

Tables are for tabular data only -- spreadsheets and charts.  They are not well suited for web page layouts of any kind.  Tables pose several challenges in Responsive Web Designs.  I try to avoid using them if I possibly can mainly b/c they stop resizing on smaller viewports.  Boostrap offers a few ways to present tables responsively -- with collapsed regions and/or horizontal scrollbars.
http://elvery.net/demo/responsive-tables/
Another option might be to create a pseudo-table with Definition Lists.
Pseudo-Tables with Definition Lists - JSFiddle
Nancy O.

Similar Messages

  • "Use presets for responsive layout" not working in Chrome

    I am building a responsive website. I am going to have parts of the website animated using Edge Animate. I will make the animation and then insert it into a div in the responsive website I am building.
    The Adobe Edge animation has a width of 100%, so that it resizes according to the area that it occupies the full width of the div no matter how wide that div may be in px.
    It is all working fine, but:
    I have an image in the Edge animation that is center aligned. It must stay center aligned no matter what width the animation ends up being.
    Within Adobe Edge, in Properties, in Position and Size, there is a option where, if you hover your mouse cursor over the top right button a tool tip says "Use presets for responsive layout"
    With the image on the stage selected, I can click on the "Use presets for responsive layout" button and then choose "Centre background Image".
    It works perfectly in all browsers accept Chrome (even IE is playing ball this time). In chrome the width of the image stretches out as the div stretches out..
    The "Centre background Image" setting says that it won't scale the image. But in Chrome it does.
    What can I do to "tell" Edge Animate to center the image but not scale it in the Chrome browser?
    I can see that in the image properties it is set to Background image x axis and y axis 50%. And the width is set to pixels. But in Chrome, the image stretches.
    If you go to http://www.brainstormadvertising.co.uk/demo/services.html you will see what I mean. The circle image is centering BUT stretching in chrome browsers while centering nicely and NOT stretching in other browsers.

    Thank you for your reply Josh. But the point of this setting in Edge Animate is that you can set it up that the background image is center aligned and does not scale. Yet it produces code that gives the width as 21.72%.
    A little further along I see background-size: 48px; .  This is correct.
    So all the browers are reading background-size: 48px; as the scale measurement but Chrome is reading the width only, not the background-width. So this "Use presets for responsive layout" works in all browsers except chrome.
    I don't know how to change that code after the artwork has been published. I can see the code using Firebug, but where do I change it in my code on my computer before uploading to the server?
    I have reported this bug to Adobe.
    Please see the attachment. You can see where all the settings are made and where I am getting a problem.

  • Center responsive layouts in Edge

    Hi,
    I would like to center a responsive layout, which I have done.
    With that code it works, but only when the width of my layout is fix:
    $("#Stage").css("margin","auto")
    But I want a flexible width, (I am using stage width in % not in px) and then the
    code is not working anymore.
    I need this flexible width, because I am loading in a container which is positioned on the stage
    three different layouts with 320px, 600px and 1200px-width.
    yepnope ({
    load: "libs/EdgeCommons.js",
    callback: function (){
    EC.setAdaptiveLayouts(
    [320, 600, 1200], sym, "adaptiveContainer"
    These layouts I have created in Symbols.
    is it possible to center these different layouts/symbols?
    Can anyoune help me with that?
    Many, many Thanx!!

    If you just want to center a div, here is an example how to do it in css:
    <!DOCTYPE html>
    <html>
    <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
              <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
              <title>test</title>
        <style>
        html, body {
            margin: 0px;
            padding: 0px;
            #Stage {
                background-color: #ff0000;
                margin: 0 auto;
                width: 900px;
                height: 200px;
        </style>
    </head>
    <body>
              <div id="Stage">
              my content here
        </div>
    </body>
    </html>

  • How to setup a default direction for new divs in fluid grid layout in dreamweaver?

    Hi,
    how to setup a default direction for new divs in fluid grid layout in dreamweaver? I am an RTL interface user, I need my new divs to be inserted from right to left not Left to Right! could it be in dreamweaver?
    Thanks.

    This may get me into strife, but my experience is that you are better off finding another platform for your RWD.
    The framework that I tend to use is by Zub-Foundation http://foundation.zurb.com/.
    A commercial product that I have come to appreciate can be found here http://www.projectseven.com/products/tools/composer/index.htm. Please do not mention me if you happen to choose this product.

  • How to setup a default size for new divs in fluid grid layout in dreamweaver?

    Hi,
    how to setup a default size for a new divs in fluid grid layout in dreamweaver? I don't need the default size for new divs as a 100% width, I need them 13.69% as a one coulmn width only (7 coulmns fluid grids layout for desktop size 1000w).
    This problem I've faced when I intended to insert dozens of fluid grid divs in the layout.

    Sorry, I don't believe that you have had a good look at the Foundation framework. I'll now hold your hand while we go through the basics.
    Here is the specific page http://foundation.zurb.com/docs/components/grid.html
    The default values are
    Em-base : 16px
    Row width: 62.5em (62.5em x 16px = 1000px)
    Columns per row: 12
    These and other default values can be changed. The fact of the matter is that if you stipulate a section width of 2 or 3 or 12 columns, the widths will automatically be calculated for you.
    In your case, if you want 7 columns, all you need to do is change the number of columns per row and the rest is done for you.

  • Presets for responsive layout

    Hi there,
    I was doing a tutorial and when arrives the moment to use the presets for responsive layout, the guy on the tutorial has 6 presets and I only have one...
    Does anyone know how can I get those presets?
    Thanks!

    Thats because you have a Stage > Symbol selected.
    The tutorial you reference most likely has an image asset selected: which will reveal 6 Layout Presets.
    So in your case, if your symbol 'houses' an image you want to apply one of the six Layout Presets, then you need to be in Symbol Edit Mode: simply double click directly onto the Symbol to enter Edit in Place. Then select the image, then choose from the Preset selector.
    Hope this helps
    Darrell

  • Responsive layout design

    Hello dreamweavers.
    I have a question regarding responsive layout which is regarding to dimensions, I see a lot of post on the net with does and don'ts, that's why I'm asking for a
    more professional and formal advice. So my question is, if I set up a design page for example 1400 width x 1000 height or 1600 width x 1400 height, would both
    dimensions be able to be coded responsive in order to take up all devices? can a web designer make it responsive regardless its layout dimensions ir is there a specific dimension when it comes to responsive layout,
    and what would that be?
    Thank you.

    inquestflash wrote:
    Thanks for the information Nancy. Just one more thing Id like to ask. Would setting up as default dimensions the 960 GRID system be ok, and then
    the developers can use % for the rest of the devices?
    Yes,
    Set a container wrapper to max-width: 960px;
    Like:
    #containerWrapper {
    max-width: 960px;
    width: 96%;
    margin: 0 auto;
    Any screen which has the real estate to accommodate 960px width will get that. As the screens real estate gets narrower the design adjusts to suits its width.
    Obviously if you just have a one column design that's the job done but you will no doubt have multiple columns so you then need to use media queries to change the properties of the css as the browser window becomes narrower to make the design look nicer.

  • Are there any ready samples of tables anywhere in InDesign (kind of presets or layouts)?

    Are there any ready samples of tables anywhere in InDesign (kind of presets or layouts)?

    No. But you could do a Google search for tutorials and samples.

  • How to preserve aspect ratio with a responsive layout?

    Hi,
    I have an image that I need to place in the centre of my stage.
    The image is that of a ball and has 400px by 400px size.
    I want my animations to be responsive so that the image will scale but still maintain the correct aspect ratio.
    Currently if I set pixels to % on width and height, the image stretches.
    How do you do this in EA?

    Hi Jahandaniel,
    I have tested responsive layout and it worked perfectly. Please check the following adobe tv article and let me know your result.
    Creating a Responsive Layout | Learn Edge Animate | Adobe TV
    Regards,
    Devendra

  • Need help on responsive layout

    Hi Folks,
    In order to make the SAPUI5 application responsive in nature, we are trying to use ResponsiveFlowLayout/ResponsiveLayout/ResponsiveGridLayout as per the details available in below links. But, in this case the sample code are done via JS view, so how is possible via XML view?
    https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/layout/demokit/ResponsiveGridLayout.html
    https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/layout/demokit/ResponsiveLayout.html
    https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/layout/demokit/ResponsiveFlowLayout.html
    Regards,
    Diptanu

    Hi Diptanu,
    Refer to the below sample code:
    <mvc:View height="100%" xmlns:core="sap.ui.core" xmlns:form="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
      controllerName="my.own.controller" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:c="sap.ui.commons" xmlns:layout="sap.ui.layout">
       <Page title="Layouts">
        <form:SimpleForm id="myForm" minWidth="1024" layout="ResponsiveLayout">
         <form:content>
          <Label text="Name">
           <layoutData>
            <layout:ResponsiveFlowLayoutData weight="12"></layout:ResponsiveFlowLayoutData>
           </layoutData>
          </Label>
          <Input value="Responsive Layouts">
           <layoutData>
            <layout:ResponsiveFlowLayoutData weight="8"></layout:ResponsiveFlowLayoutData>
           </layoutData>
          </Input>
         </form:content>
        </form:SimpleForm>
       </Page>
      </mvc:View>
    Hope this helps!
    Regards,
    Anusha

  • Responsive layout template problem

    I created a master page with a responsive layout and then saved as template.
    I then went to assets and created "new from template" a new page.
    When I save this page as index.htm I get the following error message:
    Making this change would require changing code that is locked by a template or a translator. The change will be discarded.
    Pressing OK then brings up another error box with the following message:
    While executing onLoad, the following JavaScript error(s) occurred:
    At line 591 of the file "c:\program files (x86)\Adobe Dreamweaver CS6\Configuration\Commands\dmxUpdateHead.htm":
    The object is not currently contained in a document.
    My website files being developed are on F: drive so I guess this is something to do with the system files.
    USING CS6 / BOOTSTRAP2 / WINDOWS 7
    No idea what to do... Welcome any advice.
    Thank you in advance for feedback
    Terry

    You will get this problem because Automatic File Update has been selected. Click the checkbox to unselect and all is well.
    The reason is that the Bootsrap extension tries to refresh the association of the necessary files and the template system rejects this because the associations are located in a non-editable area.
    The above dialog can be found by clicking Commands->DMXZone Bootsrap Options.

  • Create a photo montage showing responsive layouts

    Hello,
    Photoshop forum suggested I move over to the DreamWeaver forum for this. I am a web designer. I'd like to show a thumbnail view of the responsive sites I've created on my own website that shows a particular site (using the actual URL) in a montage of different responsive layouts. It's a common montage. Is there a way to generate this using a URL, some tool or software? I do not want to create a slideshow. I first went to Photoshop because one company told me that's what they used to create this. I'd like to keep it simple and have Googled exhaustively to no avail.

    There is an extension for Google Chrome that takes responsive captures.
    Webpage Screenshot - Chrome Web Store
    Online Service -- you enter your URL and set the breakpoint (viewport size)
    Responsive Capture - free full screenshot service
    Another online service -- makes various responsive previews to show your clients
    deviceponsive.com/
    Nancy O.

  • Why I cannot preview my responsive layout project with captivate 8?

    I can not preview my responsive layout project in captivate 8.  It just stop on the first page.  Can anyone help?

    Hi,
    Do you get the issue every time you create a responsive project? Can you just crease 2-3 slides with smart shapes and text caption; publish and check if there is still any error?
    There are chances that the issue might be with the browser, which browser are you using to preview the content?
    Chrome version 36 has similar issues with captivate html5 output. Please find the following workaround if you are using Chrome.
    http://blogs.adobe.com/captivate/2014/07/update-on-captivate-html-5-content-playback-issue -in-google-chrome-browser.html

  • Responsive layouts and expanded form options

    I love that paralax scrolling has been added to Muse. Responsive layouts and allowing uploads in forms would be top of my list for upgrades. Appreciate how far this program has come from it's first beta release, keep it up.

    Unfortunately there is no feature for creating Formscentral Forms that behave the way DW fluid grid design elements do. Basically Formscentral outputs HTML for one size form only. You can embed this HTML in your DW site and play with the fluid grid settings but as far as Formscentral is concerned you can only specifiy one size form at design time.
    Andrew Yarborough

  • Table contained in a topic causes slow response when working with source

    I am using RoboHelp V8.0.2 (I have applied the two fixes available from the Adobe product site).
    Here is my issue:
    I am documenting a product that has over 1,500 metrics.
    I am trying to make a list of 1,077 metrics in one topic (all the metrics are of the same "type" so they are grouped together).
    The table presenting these metrics has two columns, a Field Name column and a Description column.
    There is not a lot of text within the table - most of the explanations and calculations are defined outside the table.
    When I have more than about 400 table rows, the response time working with the topic in source is just horrible.
    It took 3 minutes to open the topic in source, another 3 minutes to move the table over .425in from margin.
    When I try to close the project, it gets hung up.
    Has anyone else run into a problem working with tables within a topic?
    I had a similar response time issue with V8.0.0 in general when I first installed it.
    Once I installed the two fixes, that problem was (for the most part) eliminated.
    I think the second fix specifically addressed response time issues when working in source.
    I am going to try this on one of my other writer's machine to see if it is the age of my computer.
    My computer setup is:
    Dell Precision work station with an Intel Xeon 2.40GHZ processor and 2MB of RAM.
    I am using Windows XP Professional 5.1.26 Service Pack 3.0.
    I have a 110 GB hard drive with 18 GB available.
    As always - thanks for any insight or information.
    Michael F Weart

    Hi Michael.
    Interestingly the maximum number of rows you can use when you create a table via the Table > Insert > Table menu item is 100. That said, I've just created a 500 row table and whilst it is slower than a smaller table it is OK. I am also using RH 8.0.2 but on a higher spec PC.
    Read the RoboColum(n) for a tips, tricks and musings on the Technical Communication Suite products.
    Follow the RoboColum(n) on Twitter

Maybe you are looking for