Perusoe's Testing Grounds

General Discussion
49

What happens on mobile devices?

I’m assuming that you are using a computer to formulate your layouts here, and presumably on a typical widescreen setup.

Phones and such might not look the same correct? Just wondered if you are taking that into account when setting yourself up with the maximum for wrap on one type of device.

Unless I’m overthinking it.

Game on.

50

The forum automatically adjusts for mobile devices. In fact, Discourse is actually designed for mobile first, not desktop use. We’ll get a real test of that pretty soon though. :wink:

51

Oh, didn’t see your post. I have already given your sample code there.

52

You gave the sample code where, the acronym list post? I already changed the anchors there myself. Took three minutes.

53

Not anchor.

This, in Acronyms post:

Sample Code 
<details>
<summary>Change Log</summary>

||||
| :-: | :-- | :-- |
| Date | By | Change |
| 07/13/2019 | xxx | newly created |
| 07/14/2019 | yyy | add Change Log section |

</details>

Output:

Change Log
Date By Change
07/13/2019 xxx newly created
07/14/2019 yyy add Change Log section
54

Yeah, I saw that. See my post. :slight_smile:

55

New table test. This is for shorter tables, like for maximum Stash Tabs. I’m going to try something new. Something that will allow me to have one “column” for the heading and centered without having to designate two separate tables.

Diablo III: Reaper of Souls - Maximum Stash Tabs
Diablo III =
+ 4 Stash Tabs
Reaper of Souls =
+ 2 Stash Tabs
Rise of the Necromancer =
+ 2 Stash Tabs
Complete Conqueror Chapter in 5 Seasons =
+̲ ̲5̲ ̲S̲t̲a̲s̲h̲ ̲T̲a̲b̲s̲
Total current =
13 Stash Tabs
═══════════════════════════════════════════════════════════════

I will edit this post again. Possibly several times. Right now I just want to see what I’ve got so far.

Just saw this. Thanks.

56

use “colspan” attribute.
e.g.

    <tr>
    <th colspan="3"><b>Diablo III: Reaper of Souls - Maximum Stash Tabs</b></th>
    </tr>

Edit: seems not working as expected… let me see
Edit 2: colspan should be inside <th>; but still not working…

57

That didn’t change anything. Thanks anyway.

I’ve edited my previous post so much, it’s starting to ask me for a reason I’m editing. :stuck_out_tongue:

58

Sorry that I gave you wrong code. The colspan should be inside <th>, not in <tr>.

But even put inside <th>, it doesn’t work as expected.

Perhaps Discourse doesn’t support this attribute. :thinking:

59

That’s okay. I think I can get what I want by designating two tables, like I did for the Greater Rifts to Game Difficulties table. The only problem with that is the lines separating the columns tend to be different lengths. But, I can live with that.

Testing below.

Deleted

Well, that just resulted in the same results I got without designating separate tables. Possibly because the title (header text) is so long.

I’ll just stick to what I have so far. It’s good enough for D3 forum work. :wink:

60

Or more likely it’s using the HTML 5 version which requires CSS. As I noted above, it’s a mishmash of HTML 4 and HTML 5 syntax support. For those elements that it uses in HTML 5 mode, none of the HTML 4 arguments will work and vice versa (see: <details> (HTML 5 only) and anchors (HTML 4 only)).

61

I was referencing HTML5 Tutorial sample code. :disappointed_relieved:

62

Oh, cool! The details code could be used for spoilers.

Spoiler: Where are you?

I’m right here. :wink:

Yeah. I like that. (Oh course, there’s probably a code specifically for spoilers).

63

So, you want to make this easy on yourself? Make the tables in Excel and then just highlight and paste in here. It will auto format for you.

Just tested it for funsies seeing as it auto formats when you copy from json, so i thought excel might work too. It does. It assumes whatever your top line is, is the header and puts a bold line under it. The columns under that header are all auto aligned.

This took seconds.

WING TYPE LOCATION AVAILABLE Y/N
Test Here N
Test 2 There Y
Test 3 Whimsy Y
1 Like
64

Could you test that with cells that have left, center, and right alignment in both the header and data cells? I suspect it isn’t truly formatting it and is just using the default left alignment.

65
WING TYPE LOCATION AVAILABLE Y/N
Test Here N
Test 2 There Y
Test 3 Whimsy Y
WING TYPE LOCATION AVAILABLE Y/N
Test Here N
Test 2 There Y
Test 3 Whimsy Y
1 2 3 6

Oh my, it takes the plain text output of formulas too! How nifty. That bottom right is a basic SUM function.

Data Cells and Header cells formatted as requested and no, it does not function as a fancy editor that adds that level of formatting. It just grabs the basics and makes you a really easy table. Perfect for the basics and anyone can easily do it! Even me!

2 Likes
66

Cool. Very handy.

Look at the code, tables are in easy format.
You may change the alignment afterwards.

Since the software auto-adjust the column width based on the data length, you may want to manually break a long line.
You may do so, by inserting a <br> tag.

67

Yeah, I get to do it the hard way. :slight_smile:

<div align="center">
<h2><div align="center">HeadingName</div></h2>
<table>
<th><div align="center">Column 1</div></th>
<th><div align="center">Column 2</div></th>
<th><div align="center">Column 3</div></th>

<tr>
<td><div align="center"></div><br><a href="URLHere"><div align="center"><img src="URLHere"></a></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>

HeadingName

Column 1
Column 2
Column 3
SomeName Here
Some Stuff Here
More Stuff Here

Note: The first column’s name is lifted upward because the cell data expects an image below it. :stuck_out_tongue:

1 Like
68

So, this took about 2 minutes.

# Name Source
6 Blaze (Blazing Skull): Menagerist Goblin
7 Buddy (Fallen Hound): Menagerist Goblin
8 Bumble (Yeti): Menagerist Goblin
9 Charlotte (Spider): Menagerist Goblin
10 Cow King Pet: Menagerist Goblin
11 Friendly Gauntlet: Menagerist Goblin
12 Galthrak: Menagerist Goblin
13 Grunkk: Menagerist Goblin
14 Haunting Hannah (Ghost): Menagerist Goblin
15 Humbart Wessel (White Skull): Menagerist Goblin

All I had to do was take a text document and put a tab between the number and the name another tab between name and source. Copy from text to excel and it puts it right in columns for me. Copy from excel into forum. Done.