Develop Reference

Why use divs over tables for a TABLE?

This question at face value is a duplicate of: Divs vs tables for tabular data
BUT I don't think there is a good explanation of WHY someone will ignore what we agree on as standard practice.
It is 2017, tables were inappropriately used for layouting so people say don't use tables, but the exception we know is for visualizing tabular data!
Why is react-table made with divs instead of table/tr/td/th ? https://github.com/react-tools/react-table Certainly some, if not all, 43 contributors know that it shouldn't be divs.
Finally, isn't there an accessibility argument to be made in favor of using the right definition for the job? Wouldn't a screen reader understand that something is a table b/c it uses the term?

Nowadays, tabular data can be formatted nicely with divs and flex box css model. Not 100% as with table, but very close. Additionally, table elements (especially tr) can be styled with css to achieve responsive behavior for mobiles and tablets. At least in most modern web browsers.
So I'd use tables when you need to keep 'rubber' columns (proportionally stretching table heading and table body columns) and use divs when you can make columns with already known width and when semantics is not that important.

is there a js library for displaying image search results in rows with optimal spacing?

Sites like google image search display images of varying width in rows. Apparently, they select which images to group together, and which images to make a bit smaller, in order to achieve a fairly even spacing between the images.
I tried to search online for a library that implements such an algorithm.
I am asking here if anyone knows of such a solution and if not, I could use some pointers on how to write this code myself.
UPDATE: I found photowall using jquery.
this seems to be the answer. I am currently searching for an angular.js directive

There is the library Masonry (the one mplugjan also mentioned). This library is very flexible in the way you can set up a grid. See their options page.
If you want to do it your self, you have roughly two options:
The images have a fixed/max width
The images have a fixed/max height
Google Images give their images a max height, which allows them to creates rows, and position the images inside them.
The other option is to create columns of a fixed with and place the images in these columns. This option, however is a bit harder to implement, because you have to think harder about the order in which the images are placed.
Edit:
After a quick look at Photowall, it seems that Masonry is more flexible. The documentation on the Masonry site show far more examples in mixing various heights/widths.

Generated HTML tables that I've successfully changed several indirectly... except this particular one

My site has these interactive tables that are inert until activated by an instructor when they are testing students. The backend is controlled by a vendor and I am the lowly web developer who cleans up their mess on the frontend so things look presentable. I've managed to change several tables indirectly through CSS and JS, but I can't apply anything to the HTML directly to the table since it's generated when the page loads. This particular table is perplexing,it will not shrink down to 720px. I tried everything from adddClass, nth-child, fixed sizes, etc. My last attempt was to write a function that set attributes to td's. It worked and it'll show on the developer tools but the actual table didn't shrink at all. I've been up 24+ hours so I might just be tired and not aware of simple mistakes. Anyways here's my demo. Thank you very much any help is very appreciated.

I just found this: Why is my table cell width wrong in Chrome?
Tables have a property called table-layout which is by default set to auto. It allows the table to be flexible and gives it the ability to distribute column widths on the fly. Setting my rogue table this way:
table-layout: fixed; width: 100%
made it behave and honor the widths I had assigned to it. Here's more details on table-layout
Demo
EDIT: I forgot to mention that this only happens in Chrome, but in Firefox and to a certain extent IE (it's a little off, but that's what you'd expect from a half-baked piece of work), are ok.

Fixed row-height, flexible width, justified image gallery

I'm working on a full page, flexible width image gallery.
https://weknowtoomuch.com/projects/nga/projects-grid
Now, you probably start to get an idea of what I'm trying to do. The page in it's current state is rather good, but the spaces between the images (blank spaces around the center of rows) are a bit too big.
The way I have implemented that is very simple, just distribute images by alternating their float property between left and right.
The effect that I'm trying to achieve, ideally, would be something closer to this:
http://images.search.yahoo.com/search/images;_ylt=AwrB8p4dRulSGDgAuCeZDWNH;_ylu=X3oDMTBwazJlZjZ1BHNlYwNzdHJtBHNsawN0aXRsZQRjcG9zAzA-?p=2014+Super+Bowl+pictures&aq=Trending&sid=743e5f15-0b3b-3483-ada1-c617f8754761&spos=0&norw=1&
I tried some research, but the solutions that I found involve fitting all images by changing row height, which I'm trying to avoid. Some tall images might also have to occupy two rows, which would also probably not work well with the changing row height technique.
What I'm hoping for, maybe, is an algorithm that would let me distribute images in a way that white spaces are minimized, and also randomize the location of white space blocks.
I am not using jQuery in this project, but I could do an exception if there is no other reasonable way!
A complete solution that fulfills all the above criteria would also be a good alternative to implementing an algorithm myself, in case you have a tip in that direction...
A final note: some minimal horizontal cropping of images is also acceptable.
Hoping to get some tips, leads, and other useful feedback, and that this would help someone else sometime.

Strangely, a similar question was asked yesterday. In my answer I have presented a draft for a layout engine that adjusts the height of each column to achieve a tile effect.
You don't want to adjust the heights, but the mechanism could perhaps be altered to fit your needs. If you don't update the heights, you can achieve justification by distributing the remaining space among the gaps between the photos. That can create very large gaps which don't look nice. Alternatively, you can achieve a more compact look by centering the rows at the cost of having ragged margins. Still, this looks better in my opinion.
I've created a scrappy prototype (that does not work in IE and has other issues). It centers the images, but you can download it and alter the gap and center parameters.
I know that this is not an answer to your question, more like a suggestion. There are bin-packing algorithms for evenly distributing the images over the rows. Also, the issue of the double-row images is not solved.
Are your photos of arbitrary size or do you use, say, three or four standard sizes? If so, possible layouts could be precalculated and then applied on the fly.

Huge HTML Table with fixed header, alignment between header cells and row cells

I need to represent huge data(37 columns,1000+ rows) in web. I would like to fix header row of this table and then manipulate data accordingly.
There are lots of possible solutions in web, some of them depends on css and some depends on javascript.
I have tried lots of them, and each time I ve stucked at the same point where table header cells and table row cells are not aligned.
First way i have tried : https://s12-chicago.accountservergroup.com/~gomathik/demos/scroll.html
Second way i have tired : http://www.imaputz.com/cssStuff/bigFourVersion.html#
They both, fixed the header of course. But i still have the alignment problem.
Do you have any suggestions?
I m begginer to html and css, any help would be appreciated.
Thank you in advance!

i have some experience in this and i can give you some thoughts/ pointers:
easiest way to do this is to set table style to fixed, then you can change column widths with css and they will stay that wide regardless of content inside.
after your column widths is pre-defined, you can clone the thead into another table above your table and it will act like a fixed header
otherwise you will need to:
set the height of the header to 0px
clone the header into a table above the table
set the width of the new header's table to the width of original table
set the outerwidth of each cell in the new table to the outer width of the same header cell in the original table
also, none of the solutions for doing this seem to be good. i found that writing a custom solution is always better then trying to arm wrestle an existing generic plugin into doing what i need.

I worked on a project where the goal was to visualize large data sets (10-20 columns, 500+ rows), among other visualizations, as a table.
I used Google Visualization API Table. It's simple to use and controlled with JavaScript (don't scare off!).
It has nice support for formatting (through DataTable class). It actually uses HTML table markup with some extra JavaScript and CSS in there. The Table class takes care of the cell alignment. Take a look at the examples.