 Borders don't show, Using HTML to create table and CSS to define border |
  |
| CyberRookie |
 Apr 13 2020, 02:11 AM
Post
#1
|
|
Group: Members Posts: 2 Joined: 13-April 20 Member No.: 27,278  |
Hi Fellow web authors.
This feels like such a simple thing that should work but it doesn't. I created this simple code sequence through the guidance of a tutorial that I am using to learn to write HTML and CSS code. I am using VS Code as a compiler with live server. I have opened the live server generated address which renders my html code from several options: Internet explorer google chrome and safari, using my iMac and windows10 laptop. In all instances I get a table without a border. Please see my code in Index.html below: Any help or suggestions or advice will do please. All I am trying to do is to create a border line around my table. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <main> <h1>The Bakers ratios:</h1> <br /><br /> <table style="border: 10px black; border-spacing: 25px;"> <tr> <th>Dough</th> <th>All purpose</th> <th>Sourdough</th> <th>Pizza dough</th> </tr> <tr> <th>Hydration</th> <td>75%</td> <td>75%</td> <td>60%</td> </tr> <tr> <th>Baking time</th> <td>20 min</td> <td>40 min</td> <td>15 min</td> </tr> <tr> <th>Yeast</th> <td>Dry Yeast</td> <td>Sourdough starter</td> <td>Wet fresh yeast</td> </tr> </table> </main> </body> </html> |
  |
 
|
| pandy |
Apr 13 2020, 03:57 AM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
It's because you have left out the only property that's required for a border to be visible, border-style. If you change what you have to for instance '10px solid black' the border will show.
JFYI, if you use only border-style the browser will decide the width and the color will be taken from the context, usually black. If you make the text red, the border will also be red. I suspect you expect borders to show up also around cells, since you've used border spacing. That won't happen. In CSS borders are specified separatly for TABLE and TD. And TH for that matter. Quite logical. The table selector only matches TABLE, not TD and TH. Just a tip. Don't use inline style (the style attribute) more than occationally for a quick change. Start with a style block in head now while you are still taking your first steps and then move to an external style sheet. The advantages are many. For you, right now, the advantage is that you can write one common rule for the borders of TABLE, TH and TD, if you want them to have the same style. They can very well have different styles. Even if you want them to have different styles you only need three rules instead of adding a style attribute to each TD and TH. In the long run, it's much easier to maintain the site if the CSS is in one place. If you need to hunt for all style attributes you've gained nothing, work-wise, compared with using old school HTML styling attributes. You may want to take a look at the CSS Reference here. It's only CSS1, but that's what you should start with anyway and it's still valid. You get the basics in a very compact form. https://htmlhelp.com/reference/css/ |
|
|
|
| CyberRookie |
Apr 15 2020, 11:56 AM
Post
#3
|
|
Group: Members Posts: 2 Joined: 13-April 20 Member No.: 27,278 |
Hi there Pandy
Thank you so much for your very generous and informative reply! It was very helpful! I tried it with style="border-style: solid" and it worked! the border appeared! It also worked when I inserted the solid property into my original statement, border: solid 10px black. Also thanks for the awesome CSS link! very handy! I am doing a CSS tutorial now and will frequently need good references to brows! Kind regards! |
|
|
|
| pandy |
Apr 17 2020, 03:39 PM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You are welcome.
 The CSS reference here may be old, but it's still the most condensed walk-through I know about. Maybe not the descriptions of different properties so much as these chapters: Quick Tutorial, CSS Structure and Rules, Linking Style Sheets to HTML. Maybe also the first chapter, Style Sheets Now!, to understand why we moved to CSS in the first place. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 25th April 2024 - 02:46 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC