About This Article •
Some of you have been asking for the table widget code I had posted a while back. Here it is! Hopefully you can figure out the structure and edit the code as you need. I don’t have much time at the moment to tweak any of it for you, but help each other via the comments if you can. I’ll pop in where possible.
Five-Column Horizontal Header
This table has five columns with headings at the top. The colors and styles can easily be changed using the provided CSS within the code. Get the code!
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| R1 C1 | R1 C2 | R1 C3 | R1 C4 | R1 C5 |
| R2 C1 | R2 C2 | R2 C3 | R2 C4 | R2 C5 |
| R3 C1 | R3 C2 | R3 C3 | R3 C4 | R3 C5 |
| R4 C1 | R4 C2 | R4 C3 | R4 C4 | R4 C5 |
| R5 C1 | R5 C2 | R5 C3 | R5 C4 | R5 C5 |
Four Column Vertical Headers
This table has headings at the left side. Get the code!
| R1 Head | R1 C1 | R1 C2 | R1 C3 | R1 C4 |
|---|---|---|---|---|
| R2 Head | R2 C1 | R2 C2 | R2 C3 | R2 C4 |
| R3 Head | R3 C1 | R3 C2 | R3 C3 | R3 C4 |
| R4 Head | R4 C1 | R4 C2 | R4 C3 | R4 C4 |
| R5 Head | R5 C1 | R5 C2 | R5 C3 | R5 C4 |
Four Column Dual Headers
This table has headings at both the top and the left side, useful if you’re trying to display statistics with two dimensions. Get the code!
| Column 1 | Column 2 | Column 3 | Column 4 | |
|---|---|---|---|---|
| R1 Head | R1 C1 | R1 C2 | R1 C3 | R1 C4 |
| R2 Head | R2 C1 | R2 C2 | R2 C3 | R2 C4 |
| R3 Head | R3 C1 | R3 C2 | R3 C3 | R3 C4 |
| R4 Head | R4 C1 | R4 C2 | R4 C3 | R4 C4 |
| R5 Head | R5 C1 | R5 C2 | R5 C3 | R5 C4 |
Just FYI, there was some mistake in the first table code that I had to fix and I had the second table code linked to the third table code but I’ve got that all fixed now. Everything should work :-/