Static Load Error will not work borders for tables

Using Django Templates & Frontend
1

I am having trouble with my load static error. For some reason the CSS will not show a border for my table.

style.css

table, th, td {
    border: 1px solid black;
  }

ingredients.html

{% extends 'inventory/base.html' %} 

{% block content %}
{% load static %}
<link rel = "stylesheet" href="{% static 'ingredients/style.css' %}">
<h1> Welcome to the Home page!</h1>

<table>
    <th>
        <td>Ingredient Name</td>
        <tr>row one</tr>
        <tr>row two </tr>
        <tr>row three</tr>
    </th>
</table>
{% endblock %}

Screen Shot 2023-06-02 at 10.32.52 PM
Screen Shot 2023-06-02 at 10.32.52 PM1920×1217 129 KB

2

I recommend to use ready free templates as (AdminLTE)
to facilitate front-end for you, And you can download the source code from (Download AdminLTE)

But it’s OK use this table

<table class="table">
    <thead>
        <tr>
          <th>User Name</th> 
          <th> Role </th> 
          <th> Department</th>  
        </tr>
    </thead>
    <tbody>
       <tr>
         <td>Strik</td>  
         <td>Manager</td>
         <td>Purchasing</td>
       </tr>  
     </tbody>                  
</table>

Hope it helps

3

Do you have other static files that you are loading that are working? Or is this the only static file you’re trying to use? (Or are all static files not working?)

What directory is your style.css file in?

What are your STATICFILES_DIRS and STATIC_URL settings?

4

STATIC_URL = “static/”

staticfolder/imagesfolder and also
staticfolder/appfolder/style.css file
where can i find the other one?

it says here it starts as default.

5

No screenshots please. Just copy /paste those two configuration parameters into the body of your post.

6

STATIC_URL = “static/”

staticfolder/imagesfolder and also
staticfolder/appfolder/style.css file
where can i find the other one?

7

If you don’t have STATICFILES_DIRS in your settings, that’s ok. I just needed to know what it is if you have it.

You wrote:

Are those the actual directory names you’re using? Is appfolder the actual name of the directory?

See How to manage static files (e.g. images, JavaScript, CSS) | Django documentation | Django

Also review the work you did for Writing your first Django app, part 6 | Django documentation | Django

The directory name must be static and not staticfolder. What you have as subdirectories inside that directory must match how you’re referencing it in your code.

8

static/images
static/inventory/style.css

you said no screenshots so I tried to explain it in general specific terms.

I do appreciate your help. I will review the material.

9

So you have:

But then you have:

which is a reference to a different directory.

We try to avoid screenshots here for three reasons:

  • They’re not always readable on every device
  • The code in them can’t be quoted for creating replies
  • They can’t be indexed by the forum for later searches.

That’s why we want the actual code/template/etc copied directly into the post instead of screenshots.

10

Oh wow! the output of the webpage changed! I see borders around my table!

Thank you Ken. I will save this forum post so that in the future I can reference it.

Thank you so much! My headache removed! :slight_smile: