(Oh boy my early coding days from Neopets are finally useful again)

Update: June 4th dev update changed the text editor and table function slightly better now! They're still not perfect so hopefully there'll be more updates in the future.

Even so, I do want to make this guide and get the basic idea out there because HTML tables are a very powerful feature that can help a lot with customization and organization of a variety of things! If you know how to use them right, you can do a lot of really cool stuff.

Post will be organized like this

1. HTML Table Basics (What the tags mean, basic Table structure, etc)
2. Using the Lorwolf Table Maker
3. Colgroup, Colspan, Rowspan
4. Extra tips and Advanced Code

╰┈➤ ❝ External Resources ❞

Here are some amazing external resources that can help you learn and understand HTML code

• W3 schools HTML Table Tutorial
  • A great place to start as they give you interactive visuals to see how code works. They also offer tutorials on other HTML subjects as well as many other coding languages.
• Code Beautify's HTML Viewer
  • A live HTML editor that lets you see your code change in real time. It can also simplify and “beautify” your code to make it more readable and easier to understand.
  • This site also has a MASSIVE Library of other useful tools.
• Lorem Ipsum Text Generator
  • You've seen it. This is a Fake text generator you can use to test your code without having to type “Text here” or “Context goes here”.
• ChatGPT by OpenAI
  • This is a very powerful tool that takes the tediousness out of coding. It is fantastic at generating basic code, Troubleshooting problems and simplifying things for readability.
• Bard by Google
  • Google's version of ChatGPT. I haven't messed with this one as much, but it is able to generate basic HTML code on a very similar level.

╰┈➤ ❝ The Basics ❞

I like to think of HTML Tables the same way as a spreadsheet.
If you've used Microsoft Excel or Google sheets, you'll be able to understand HTML Tables.

The code for a basic 2 x 2 table will look like this

<figure class="Table">
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</figure>

“What do all these tags even mean?!”

Great question! HTML code can be quite confusing when you see all these tags and just how many are used to make a table. Here's a quick rundown on them, and what they do!

• <figure class="table"> and </figure>
  • Lorwolf starts and ends their Table codes like this. This is basically telling the site, “Hey! This is a table!" I don't think you need to add this to your code, as the site should do it automatically when it recongizes the <table> tag
• <table> and </table>
  • This is the basic tag that starts an HTML table. All the other code for the table will be between these tags.
• <thead> and </thead>
  • This tag designates that a row of a table is a header.
• <tr> and </tr>
  • Simply: a table ROW. This is like rows 1, 2, 3, 4 etc of a spreadsheet
• <td> and </td>
  • Simply: Table Data. Theres are like the indidual cells in a spreadsheet
• <colgroup> and </colgroup>
  • This tag is used to make changes to each of the columns of your table. This can be used to make a table with alternating background colors, specific widths, etc.
    

╰┈➤ ❝ The Lorwolf Table Editor ❞

HTML is currently very limited on Lorwolf, but I do have to give thanks to their comprehensive tool to create tables. Overall this tool is a really easy way for someone to understand tables without having to know HTML code.

The row, column, and individual cells options are very nice, and the functionality of the “join cells” button is helpful for creating more customized tables for different purposes.

When the feature actually works as intended, I can see it being widely used in peoples bios, shops, and wolf profiles to add some extra flair!

╰┈➤ ❝ Colspan, Rowspan, and Colgroup ❞

• Colgroup
  • Allows editing of multiple columns at once.
  • Changes size, color, borders, etc
• Rowspan
  • Makes a cell span down multple rows.
• Colspan
  • Makes a cell span across multiple columns.

╰┈➤ ❝ Extra / Advanced Code ❞

• Embedding CSS styles
  • Background images, positioning, repeating and opacity
  • specific widths/heights
  • overflow cells with scrollbars
  • Colors: Hex codes vs HSV vs RGB
• Nesting Tables inside each other
  • Yes it is possible.
  • Yes it is very messy code.
  • Dont reccomend, but I'll show you anyway

Extra post to use for code testing.

Another reserve post for testing other HTML code

Header 1

• Pretty neat

Header 2

• header 2 is larger than header 1… weird
• And it's also invisible when not in edit mode…

Header 3

• pretty standard

Header 4

1. normal text size now

Header 5

1. small

Header 6

1. omg tiny

Line break is nice. We like organization in this house

BOLD TEXT ITALICS STRIKE UNDERLINES GO CRAZY WOO

A non-Functional Button

Highlighted Text? Neat
Small Bar
OH this will be useful There more text here!
A progress bar? Interesting

Interesting, after today's dev update (June 4th, 2023) I found all of these classifications in Inspect Element

• Table-Table-Bordered (Basic table style)
• Table-Table-Striped (alternates colors between rows)
• Table-Table-Hover (cell change color when hovering over them)
• Table-Table-Responsive (Meant to allow functionality with mobile devices)

These currently do not display outside of edit mode, so perhaps more updates are needed.