I would like to make email responsive, but I have some problems with data table (no layout table). The deal is make 2 tables : one for desktop and another for mobile. Until there, no problem I can hide/show the table depending on the screen size. But I have a problem when displaying mobile table.
Take a look at this codepen ...
When the mobile table is displayed I would like the 2nd column has an "auto-size" in order to have the text on one line.
Do you have any ideas ? I can't find the correct css ...
Thank.
The 2nd column for the mobile layout needs a min-width (e.g. 100px).
I.e.
However, this table no longer works in today's email clients, if it ever worked. I have tested it using Litmus and Outlook (any), Gmail, iPhones - all have critical faults.
A much better way is to use one table - easier for maintenance as well - and you can either keep it in the old-fashioned datatable manner, or use card UI design to massively improve its readability, flexibility, and accessibility.
The essential features of the single datatable are to use a hybrid structure for the email, three columns, and repeat the header in each column. Then hide the headers for desktops (or show them for mobiles).
Like so:
Read the linked article for full details.
The essential features of the card UI design is to gather all the information for one row together, and display it on multiple lines, using hierarchy and gestalt laws to aid readability.
For example:
If you want to keep text in 2nd column in one line, maybe check this:
Keep a line of text as a single line - wrap the whole line or none at all
To adjust the width of this column, try playing with: width: auto.
Next time consider using responsive Twitter-Bootstrap framework, bro.
Related
I have four cells on one table and another table with about eight
cells.
I have set the max-width to 300px on all cells. Now the problem I face
is that the cells do not drop to a second row if the page is too
small. (Which is in every matter at the moment haha)
I was wondering how I would go about adding dynamic rows to make the extra content beyond the page width, drop below into a new row?
All the code can be seen in the Developers tools for the following website
(Cells/Rows in the products section is the problem I am facing.)
Kind regards,
Jesse M.
Ohh my sweet summer child,
The <table> element is "designed" to behave that way. The table will try to cramp up all the columns in the possible space and based on various css and html attributes, hide/overflow/cramp-up the data in columns, But never will it allow the columns of one row to flow down to another row.
So you are left with a lot of options using CSS and HTML elements.
If you are into frameworks, I recommend Bootstrap that is designed to work exactly that way, and use the provided col-xx-x classes for the elements that need to be in a row at some screen width, and "drop below into a new row" on other screen width.
I am making a basic screen which simply shows a grid of data, but the grid can have more columns than the screen can cope with. I plan to use Bootstrap, but just for it's controls, look and feel. The page, however, does not need to scale for mobile.
A very basic example of the data I am showing looks like this:
https://jsfiddle.net/bunwt5cy/1/
So, first column is just an incrementing number, followed by a date, and then the data. The number of columns can range from 1 account, to 20. Each column (cell) then has 3 financial values (2 shown in demo) ranging from 0.00 to 99,999.99 (To show sizes required).
I'm currently using <TABLE>, but is there a better way, using bootstrap, to do this? Can it be done better with DIVs? And if I do, am I limited to 12 Divs per row? If so, that's not an option then, as my grid may have > 12 columns.
Here is an example of some rows. I'm trying to make it neater, and use 'as best as possible' best practice, but also, make pretty.
As a best practice, you should continue to use table element for such spreadsheet-like, tabular data, while using CSS to make it "pretty".
The div element according to the HTML5 specs:
The div element has no special meaning at all ...
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
In this case table is available, it is appropriate for tabular data, so in terms of best practice, you should continue using table element for such tabular data rather than div.
Please see my awesome graphic below which is neither too scale or complete. BUT, I wanted to show the structure I'm going for instead of describing it.
I am creating a space rental system wherein a calendar, structured similarly to the below image, both shows the "taken" spots and also allows a user to click an "open" slot to reserve it themselves. I don't need help with the functionality though, just the layout.
Since this is tabular data at it's finest, with headers and everything, I was able to easily create the desired layout that way. However, tables render from left to right, so in the example below, it renders SPACE 1 9:00am, SPACE 2 9:00am, SPACE 3 9:00am, etc. I need it to actually render SPACE 1 9:00am, SPACE 1 10:00am, etc.
The reason is that in order to make each reservation into a "block" represented by the blue squares below, I need to be able to loop through the columns vertically and not through the rows horizontally.
I also want the columns to be a consistent width and be flexible if more spaces are added or if one/some are removed down the road.
I've been playing with flexbox, which I've barely used before, and I'm having no luck at all. I'm not even sure that's the right direction.
My question would be either 1) is there a way to get a standard table to load the way I want or 2) how can I do this without tables?
Maybe bootstrap's grid system will fit your needs. http://getbootstrap.com/css/
You can create a grid like structure by adding columns, up to 12 in a row, and locking those into rows.
http://weknowwhatyouredoing.com/
I'm trying to make a table like this one where I have a profile image to the left, a bold title/name and text underneath the bold title/name, and date/time stamp underneath that... basically the same views as on that website (http://weknowwhatyouredoing.com/) or better (or twitter tweets).
Anybody know of any tutorials on how accomplish this? I'm currently using table with multiple columns but it seems that when one cell is big, all the cells in that row become the same height and i don't like that. In android this is called a list view but i'm not sure what it is in the html/css world, any help please? Thanks in advance
You could make multiple tables floating next to each other. The elements on the website you show aren't aligned as fa as I can tell.
A tutorial on rowspan and colspan can be found here.
If you make the image span 3 rows, you can put the bold text, content and date stamp each into one row. With valign you can vertically position elements within a row if the row becomes higher than the content. This will probably happen if the 3 rows together are higher than the one spanning row containing the image.
As a quick fix for your issue with the equal row heights, you could use the same layout method as they use on weknowwhatyouredoing.com.
Wrap each column in a separate <div>, and then place your <table> inside.
4 containers, 4 tables with independent row heights.
You shall give a look at the Twitter Bootstrap CSS library Twitter Bootstrap
It's pure HTML5/CSS using only divs.
for improve your knowleges in HTML, you can see W3C (Word Wibe Web Consortium) specs. For sample, if you see this page, W3C explain all structure, attributes, for Table element.
You can find lot of tutorial in google ( search "tutorial create Table HTML" ).
Also, you can help you to understand website structure with browser plugins that display hover element in specific website. ( firebug for Firefox and Chrome, Dragonfly for Opera browser...)
Why not use multiple list elements? Tables definitely don't give you flexibility for responsive designs. Making multiple columns of list elements can be rearranged as needed with limited restrictions
I've noticed a variation of convention when it comes to using DIV tags instead of TABLE to separate/organize content on a web-page. In what situation is one more appropriate to use than the other?
Clarification: This question is both general, and specific in that I'm mainly looking for which would be more ideal for page layout.
As a rule of thumb — if every cell in a row has something in common, and every cell in a column has something in common, then you should use a table. If you don't have a thead with some th elements providing column headings, then there is a good chance you are doing something wrong. If you don't have multiple data rows and multiple data columns, then … ditto.
The choice is, however, not between a div and a table. Use the markup that has the semantics that best describes the content. There are plenty of elements in HTML: http://www.w3.org/TR/html4/index/elements.html
Use tables only with semantically tabular data. Is each row other than the header representing the same "type" of "thing"? Does each column header have below it a set of items that are described accurately by the column header? If yes to both, then use a table. Avoid tables for styling whenever possible.
Table should be used to display tabelaric data ( like in excel for example) When Div tag is a container and should be used to organize content.
You can drive a nail with a screwdriver but proper tool is a hammer.
Simple.
Use a table for tabular data.
Use a div to separate content.
IMHO, a table is for the display of tabular data and related things, not for general layout of a page itself.
Some do not hold this purist opinion, and so use tables for laying things out because they seem easy to use.
Use div when you want to make your page more syntactically correct, use less bandwidth, make changes easily,make sites more accessible and more search engine friendly. In all other cases use tables (well except when you want to show some tabular data). Here are more details.
What I see a lot (and my biggest pet peeve), is people using a single column table to separate page elements or lists. Like:
<table>
<tr><td>
List item 1
</td></tr>
<tr><td>
List item 2
</td></tr>
</table>
instead of using
<li>, <p> or <div> (if its more like content)
The moral, its fine to use table where thy make sense- tabular data, etc. Never for lists, blocks. People complain about using it for layout, but sometimes it just works so that is the only place I make an allowance for abusing tables.
i use table only to display database fields and records.
i mainly use div for page layout.
Probably the only scenario where I'd use a table for layout over a div (other than for tabular data) is when creating HTML for an email. Emails clients aren't great at displaying HTML properly, so often using tables is the only way to get pages to display consistently.
It makes me die a little every time I have to do it :(
It does concern me that people are suggesting that table should be used for anything except tabular data, even in IE6. I think the only legitimate use of tables for non tabular data is in html emails, it's not the correct usage but the rendering in email clients is so awful you have little choice.
Semantics on your HTML have always been important, but I think it is only going to get more so especially with the new HTML5 tags that are being proposed... I can see more confusion over the use of article and section
Well, as far as I know, a table is used to organize a group of objects into set places ... say three pictures side by side all separated by some text.
And a is a "section" of a webiste. This can include anything, even tables!
So I guess the answer to your question would be: if you need to set up an organized array of images, text, etc. you might want to use a table (like an excel spreadsheet), but if you simply want to divide your website into sections, use tags.
By the way, as of late, tables are being used less and less and there seems to be a tendency to using different CSS layout techniques instead of tables.
Good luck!