 Text won't align left competely |
  |
| drale988 |
 Apr 1 2024, 07:00 PM
Post
#1
|
|
Group: Members Posts: 1 Joined: 1-April 24 Member No.: 29,155  |
So I'm working on this TTRPG sheet for World Anvil. I haven't done any coding in about 18 years, so I am kind of starting fresh. My issues are two fold right now, one I want the Attributes text and the Skills text to line but I can't figure out what is causing it not to line up and two I want to put a box around the D's next to each skill. Any help you can give me is much apparated as I said I'm basically starting fresh with all this.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="Rascals, Varmints and Critters" content="Rascals, Varmints & Critters"> <title>Rascals, Varmints & Critters</title> <link rel="stylesheet" href="{CSS RESET CHOICE}"> <style> body { background-image: url('https://img.freepik.com/free-photo/grunge-paper-background_1048-10791.jpg?w=360& amp;t=st=1711919417~exp=1711920017~hmac=0baa403e7517faaf847fcbbb2ebd0d3909b684f4 c2d4c7a80b475ec5ac8e2e59'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } </style> </head> <body> <div class="table_component" role="region" tabindex="0"> <table> <thead> <tr> <th> <h3><font color="#880808" text align="left">Attributes</font></h3> </th> </tr> <tr> <th>Agility-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt=""style="width:15px;height:20px;"></th> <th>Smarts-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> <th>Spirit-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> <th>Stength-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> <th>Vigor-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> </tr> </thead> </div> <div class="table_component" role="region" tabindex="0"> <tr> <th> <h3><font color="#880808" text align="left">Skills</font></h3> </th> <tr> </tr> <th>Bluffing-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt=""style="width:15px;height:20px;"></th> <th>Discerning-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> <th>Fighting-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> <th>Fixing-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> <th>Healing-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> </tr> <tr> <th>Interviewing-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> <th>Knowing (Specialy)-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> <th>Lockpicking-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> <th>Moving-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> <th>Noticing-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> </tr> <tr> <th>Persuading-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> <th>Piloting-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> <th>Researching-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> <th>Scaring-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> <th>Shooting-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> </tr> <tr> <th>Surviving-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> <th>Taunting-<u contenteditable="true" placeholder="D">D</u></th> <th><img src="" alt="" style="width:15px;height:20px;"></th> </tr> </table> </thead> </div> </body> </html> |
  |
 
|
| Christian J |
Apr 2 2024, 07:59 AM
Post
#2
|
|
.  Group: WDG Moderators Posts: 9,663 Joined: 10-August 06 Member No.: 7 |
QUOTE(drale988 @ Apr 2 2024, 02:00 AM)  I want the Attributes text and the Skills text to line Not sure what you mean with "to line", do you want their cells to span the entire table row? QUOTE I want to put a box around the D's next to each skill. You could give the their containing elements a CSS border, like CODE u {border: solid #000;} But the U element may not be appropriate semantically speaking, what to use instead depends on the purpose of those D letters. You probably shouldn't use the CONTENTEDITABLE attribute at all. Don't use TH elements for all table cells, it's meant for table headings (like Attributes or Skills) while normal cells use TD. Also, DIV elements can't be used inside tables, except in cells. |
|
|
|
|
3 User(s) are reading this topic (3 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 30th April 2024 - 05:20 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC