 |
| ||
|
| Author | Message | Page: 10 9 8 7 6 5 4 3 2 1 [all][bottom] |
Preview the code of the "working example" I posted above. It broke the forum by making everyone scroll and I got modded for it. But that does exactly what happens. It's an extreme example, I would never create a table that wide, in fact I want to specify a table that is only 600px wide, which would only force horizontal scroll in the smallest of situations. But the point it, I want to be able to create a fixed width table. I can do this with normal tables, but not with easy tables. If it's a case of code implementation, then I have a suggestion... Currently a tables width is specified by the first row ending with |xxx%, where xxx is a value between 1 and 100. To implement fixed widths, can I suggest that the first row end in |"xxx", where the xxx in this case refer to the size in pixels. This could also be included in the column widths as well, but personally I am happy with percentage column widths, they're unlikely to change of the whole table has a fixed width. To give you an idea, this is what I can achieve, and want to achieve, with the html style table code: <small> <table width="600"> <tr> <th colspan="4">Basic Information</th> </tr> <tr> <td width=25%><b>Character Name</b></td> <td width=25%>Buran Bo</td> <td width=25%><b>Height</b></td> <td width=25%>6'5"</td> </tr> <tr> <td><b>Player Name</b></td> <td>Jonathan Bond</td> <td><b>Weight</b></td> <td>205 lbs</td> </tr> <tr> <td><b>Character Race</b></td> <td>Genasi (Air)</td> <td><b>Eyes</b></td> <td>Dark</td> </tr> <tr> <td><b>Alignment</b></td> <td>Chaotic Neutral</td> <td><b>Hair</b></td> <td>White</td> </tr> <tr> <td><b>Deity</b></td> <td></td> <td><b>Size</b></td> <td>Medium</td> </tr> </table> <table width=600> <tr> <th colspan="4">Class, Level & Experience</th> </tr> <tr> <td width=25%><b>Primary Class</b></td> <td width=25%>Barbarian</td> <td width=25%><b>Level</b></td> <td width=25%>4</td> </tr> <tr> <td><b>Multiclass 1</b></td> <td>-</td> <td><b>Level</b></td> <td>-</td> </tr> <tr> <td><b>Experience Points</b></td> <td>4,100</td> <td><b>Total Level</b></td> <td>4</td> </tr> <tr> <td><b>Next Level At</b></td> <td>6,500</td> <td><b>Proficiency</b></td> <td>+2</td> </tr> <tr> <td><b>Max Health</b></td> <td>38</td> <td><b>Initiative</b></td> <td>+1</td> </tr> <tr> <td><b>Current Health</b></td> <td>31</td> <td><b>Armour Class</b></td> <td>13</td> </tr> <tr> <td><b>Passive Perception</b></td> <td>12</td> <td><b>Speed</b></td> <td>30'</td> </tr> </table> </small> And this is what I get using easy tables: <small> .|4! Basic Information |100% .|25%= Character Name. |25% Buran Bo |25%= Height |25% 6'5" | .|= Player Name | Jonathan Bond |= Weight |205 lbs | .|= Character Race | Genasi (Air) |= Eyes | Dark | .|= Alignment | Chaotic Neutral |= Hair | White | .|= Deity | |= Size | Medium | .|4! Class, Level & Experience |100% .|25%= Primary Class |25% Barbarian |25%= Level |25% 4 | .|= Multiclass 1 | - |= Level | - | .|= Experience Points | 4,100 |= Total Level | 4 | .|= Next Level At | 6,500 |= Proficiency | +2 | .|= Max Health | 38 |= Initiative | +1 | .|= Current Health | 31 |= Armour Class | 13 | .|= Passive Perception | 12 |= Speed | 30' | </small> As you can see, the code is much easier to maintain, especially for an ever evolving character sheet. But without being able to specify a fixed width I cannot get the desired result. This message was last edited by the user at 11:21, Sun 21 Jan 2018. | |||||||
Neither of those have any effect on the website width (I think it might affect the responsive site version, but I stay away from that, especially since I can't control how big it is, it shows up way too big. Seems to think I'm blind and need Big Fonts turned on. And that is all responsive sites, not just responsive rpol.). This message was last edited by the user at 11:44, Sun 21 Jan 2018. | |||||||
It's nested tables This <small> .|4! Basic Information |100% .|25%= Character Name. |25% Buran Bo |25%= Height |25% 6'5" | .|= Player Name | Jonathan Bond |= Weight |205 lbs | .|= Character Race | Genasi (Air) |= Eyes | Dark | .|= Alignment | Chaotic Neutral |= Hair | White | .|= Deity | |= Size | Medium | .|4! Class, Level & Experience |100% .|25%= Primary Class |25% Barbarian |25%= Level |25% 4 | .|= Multiclass 1 | - |= Level | - | .|= Experience Points | 4,100 |= Total Level | 4 | .|= Next Level At | 6,500 |= Proficiency | +2 | .|= Max Health | 38 |= Initiative | +1 | .|= Current Health | 31 |= Armour Class | 13 | .|= Passive Perception | 12 |= Speed | 30' | </small> Gives this: But THIS <small> <table width=500><tr><td> .|4! Basic Information |100% .|25%= Character Name. |25% Buran Bo |25%= Height |25% 6'5" | .|= Player Name | Jonathan Bond |= Weight |205 lbs | .|= Character Race | Genasi (Air) |= Eyes | Dark | .|= Alignment | Chaotic Neutral |= Hair | White | .|= Deity | |= Size | Medium | .|4! Class, Level & Experience |100% .|25%= Primary Class |25% Barbarian |25%= Level |25% 4 | .|= Multiclass 1 | - |= Level | - | .|= Experience Points | 4,100 |= Total Level | 4 | .|= Next Level At | 6,500 |= Proficiency | +2 | .|= Max Health | 38 |= Initiative | +1 | .|= Current Health | 31 |= Armour Class | 13 | .|= Passive Perception | 12 |= Speed | 30' | </td></tr></table> </small> So apart from the extra table border (which I can live with) it gives the result I want. But it would be nice to be able to do this natively in Smart Tables. | |||||||
Still, that's a neat trick! If I understand it aright, you basically wrap the Easy Table you want in a pre-sized HTML table, and everything scales relative to the wrapper table's width in pixels, is that right? Thanks for sharing this technique. I wonder, though, what is the advantage over (for instance): <center> |!< Name: |<2 ??? |!< Class: |<2 ??? |60% |!< Clan: |<2 ??? |!< Level: |^2 1 | |!< Faction: |<2 ??? |!< Temple: |<2 | |!^ STR | ? |!^ DEX | ? |! CON^ | ? | |!^ INT | ? |!^ PSY | ? |! CHA^ | ? | |!^ HD | ? |!^ HP | ? |! AP^ | ? | |!<4 Attack Damage | ? | ? | |!2 Spells | | | | | |! Ammunition ||! Rations ||! Light || |!>5 Encumberance || | | | | | | | | | | | | | | | | | | | | | | | | | | | | |!4 Languages |!2 Spells | | | | </center> which would yield: This message was last edited by the user at 01:10, Tue 20 Feb 2018. | |||||||
Using the table as a wrapper lets you specify the entire table's width as a fixed amount. (Say, 500 pixels.) The percentage method makes the table resize its cells based on the width of the browser window, which may make some cells misbehave. | |||||||
Because, depending on resolution or window size, that could force cell contents to wrap and break the intended formatting. I want my table to stay the same regardless. This will mean that a window is forced to scroll if minimised, but the table format stays the same. Un maximise your browser and play with resizing it, you might see what I mean. Now I fully realise that tables, and HTML, in reality should not be used for formatting - however - this is RPoL, and it doesn't implement full CSS or HTML. | |||||||
Wow - it even allows to put 2 tables side by side <small> <table width=800><tr><td> .|4! Basic Information |100% .|25%= Character Name. |25% Buran Bo |25%= Height |25% 6'5" | .|= Player Name | Jonathan Bond |= Weight |205 lbs | .|= Character Race | Genasi (Air) |= Eyes | Dark | .|= Alignment | Chaotic Neutral |= Hair | White | .|= Deity | |= Size | Medium | </td> <td> .|4! Class, Level & Experience |100% .|25%= Primary Class |25% Barbarian |25%= Level |25% 4 | .|= Multiclass 1 | - |= Level | - | .|= Experience Points | 4,100 |= Total Level | 4 | .|= Next Level At | 6,500 |= Proficiency | +2 | .|= Max Health | 38 |= Initiative | +1 | .|= Current Health | 31 |= Armour Class | 13 | .|= Passive Perception | 12 |= Speed | 30' | </td></tr></table> </small> | |||||||
I have a sandbox devoted to tips and tricks, and may do a write-up on this, crediting Escribblings and linking here, of course. I may have to break out my old books on HTML again... this is good stuff. | |||||||
It is important to note, and this may be where I fell down before... The smart table must be on a separate table top the td, a space is not enough to prevent it from breaking. In theory, you should be able to put a grid or table in rows and columns... Yup... You'll need to quote the message for the code. I'm on my phone and feeling lazy. | |||||||
No problem. Thanks for sharing what may become a frequently used technique on RPoL. | |||||||
| |||||||
Good question... I think they just align centrally. The only way I've got around it is with Line breaks. | |||||||
|4! Basic Information |100% |25%= Character Name. |25% Buran Bo |25%= Height |25% 6'5" Giving: I removed the '100%': This looks like it's pretty close to what Escribblings was looking for NOTE: here the column widths are based off of a percent of the full width of the table |4! Basic Information | |25%= Character Name. |25% Buran Bo |25%= Height |25% 6'5" Giving: I removed the '100%' and the 25%: |4! Basic Information | |= Character Name. | Buran Bo |= Height | 6'5" Giving: I removed the '100%', placing a header 'divider' with the column size: NOTE: here the column widths are used to set the full width of the table |4! Basic Information | |25%---------------|25%-----------|25%---------|25%----- |= Character Name. | Buran Bo |= Height | 6'5" Giving: To recap the original problem, it looks like not choosing 100% would have solved it (and maybe without nesting tables) | |||||||
Interesting. Thank you for that. I'm going to stick with nesting tables so I can force the table width though. I see the error in specify both while table width and column width as percentages, so that is helpful. But if I use multiple tables (easier than working out column spans) for a character sheet, then I'll want them all to be the same width. I'm presuming that the method your described would set the 25% to the width of the column with the widest text. | |||||||
|4! Basic Information |100% |25%---------------|25%-----------|25%---------|25%----- |= Character Name. | Buran Bo |= Height | 6'5" |4! Basic Information |50% |25%---------------|25%-----------|25%---------|25%----- |= Character Name. | Buran Bo |= Height | 6'5" This does NOT scale with the window <table width=500> <tr> <td> |4! Basic Information |100% |25%---------------|25%-----------|25%---------|25%----- |= Character Name. | Buran Bo |= Height | 6'5" |4! Basic Information |50% |25%---------------|25%-----------|25%---------|25%----- |= Character Name. | Buran Bo |= Height | 6'5" </td> </tr> </table> I am still going to nest the tables for my own use, as it means I can force the formatting. What would be nice is if there was a way, in easy tables, to specify a pixel width, somehow, instead of a precentage width. maybe, instead of |100% we could use |"500" | |||||||
I've just been back through this, and noticed that you'd made all the columns 25%. Mine were 20-30-20-30. Your solution doesn't actually solve this unfortunately. Without specifying the table size at all... |4 Header | |10%-----|20%-----|30%-----|40%-----| | 10 | 20 | 30 | 40 | Should give 4 different column widths, but it doesn't. And therein lies the problem. I can get the widths if I put them in the cells, but not in the divider. |4 Header | |-----|-----|-----|-----| |10% 10 |20% 20 |30% 30 |40% 40 | | |||||||
|4! Header |50% |10% 10 |20% 20 |30% 30 |40% 40 | | 10 | 20 | 30 | 40 | Problem only seems to arise when you merge the header row across the full table - the divider row and % width settings work fine when the columns are the same width as the cells below, though again, you don't need the divider row to do this and can put the % setting in the heading row itself: |!!10% Header1 |20% Header2 |30% Header3 |40% Header4 |50% | 10 | 20 | 30 | 40 | | |||||||
It allows alignment of the entire column without specifying in each cell. Interesting that it's the combined header that's the issue though | |||||||
| |||||||
Hear! Hear! (Or, as they would say on them there interwebs, +1! ;^) ) I'd be willing to do this if there is no one else willing to take it on. This whole thread has been a wealth of good information concerning Easy Tables. In fact, I think I'll be putting something together for my own use whether or not it gets included in the Help, and I'll be posting it here for peer review in that case. Would all of you like to see this integrated with what already exists in the Help on the subject, or just cover the more advanced techniques discussed here? What say you? | |||||||
| |||||||
I'd love to see the Easy Tables Tips and Tricks Guide all bundled up somewhere, whether that's in the FAQ or a stickied thread in Heaven. | |||||||
horus - if you're kind enough to draw something up then can you post it in Technical Discussion for everyone to provide feedback ... then once we're happy with it (or the shouting dies down) we'll either put it into the FAQ (I might have to edit it a bit for that - I don't know that the FAQ itself supports Easy Tables, and there's probably other formatting requirements, but don't worry about that now) or at least into Heaven. | |||||||
When it's ready for review, I'll post in Technical Discussion, as you have indicated, probably in several posts broken up by subtopic. (That way it will also be easier to read, review, and comment...) I will actually be working in one of my games where I record stuff like this as I learn it. This will likely take a little while, as my nights tend to be full of work lately, but I'll get 'er done.
If you've seen any of my other stuff, you already know this is how I tend to organize things, anyway. Yeah, I'll definitely use links to make it accessible. I should have an outline worked up in the next day or so, and will start from there. | |||||||
A first draft is up on Technical Discussions: link to a message in another game Please note I don't wish to clutter up the topic with commentary. Please hit me in rMail with any feedback, comments, or ideas. UPDATE: Improved drafts of selected sections are up. I've seen only minimal feedback so far, so I must be doing fairly well... This message was last edited by the user at 16:55, Thu 02 May. |
moderator post | [top] |