I am trying to center a table’s structure (not the content inside, but the table itself).
I have been trying a combination of {: class=, {: table=, and other options. But have not been able to figure out how to do this. What would be the proper way to achieve something like this? From the search results I have done on google, there doesn’t seem to be a documented way to center a table anymore, as HTML5 no longer supports <center> which was the most recommended way I could find on Stackoverflow.
I guess the real answer I am looking for is how can I specify elements with specific CSS (and in this, a table) to be centered in a page? I am still learning the jekyll way of doing this, so apologies if this is a basic thing.
If nothing else seems to work (and especially for tables!), one can always “fall back” to normal HTML (and pre HTML5), one of the things I like in Jekyll. For instance the table here
starts with {% capture details %} <table border="1" cellspacing="0" cellpadding="1" align="center"> <tr> …
in my markdown file. Markdown does not allow everything one might need for a table.
So what I am reading from this - there isn’t a full blown way to do this without involving CSS?
So from the files I have (and the page as an example - I guess I can only include two links, sorry you have to search instead of me posting them specifically): Blog Site
The only way that I see how to do this without a massive amount of editing, is to add a new {% include blog-post.html %} that specifically is related to blog entries, and have those override defaults (like table)?
Or is there a more efficient way of doing this and replicating it across the environment? I was looking at CSS to do this initially, but just wasn’t sure if there was a more jekyll way to go about modifying this.
Unrelated to this thread, I just noticed that when loading that page I linked above, the CSS is not loading (at least for me) it appears as a completely white page. But the CSS loads for pages running from jekyll serve but not in Github Pages.
You can use Jekyll to create your table with the align="center" set. And that can be in includes or layout or whatever the layout appears.
Maybe _includes/table.html and then you reuse it for data from YAML files.
Or use CSS to a central styles.css page that gets loaded on every page in head tag. You don’t even have to add a class if you just target the CSS to table { ... }
Both need a few lines of code. The CSS one is more lines but better in the long run.
Yeah, figured this would be the best way, is to just create a separate stylesheet for posts.
Any advice on the CSS not loading in the actual webpage though?
If I go to the root site (which will eventually change to to be this url. The CSS is loading in the network tab, but the style is not being applied (on two different machines and three different browsers - I don’t think it is a caching issue).
It isn’t loading the background or other style information involved: Original Site Github Built Site
Local Server (after removing _site/ and .jekyll-* files:
You should never version _site directory. GH will built it for you when you push to your master branch and serve it.
I got a CSS error. So I made a PR to fix CSS links.
Make sure you’re using Jekyll 3.9 locally. The latest is Jekyll 4 but GH Pages uses 3.9 so for consistency you should too.
GitHub Pages runs jekyll build, which is the same as a jekyll serve without the server. So no, your CSS will be the same locally and on GH Pages if you have your configure setup right. Like your baseurl as ‘’ which is fine here.
Ah that did the trick. There was indeed a conflict there with style.css and style.sass. I will have to work on migrating everything over to sass going forward.
The only last piece I need to figure out (specifically to this layout) is why this (the completely black background under h1 occurs:
My assumption is that it is because the ordering of objects, or that you can’t add fluid variables into style.css because it is processed before the page. But I am not 100% sure on that. For what it is worth, I have tried using page vs post as well. It still results in a black screen.
The line you refer to is presumably intended to give each post it’s own hero image based on a configured value.
The page variable can contain page-specific values like page.title or page.my_background
The problem is that the CSS is only rendered once (as it should be) and outputted as a single file using it’s on styles.css or whatever as its concept of current page.
Hence your background URL is invalid. If you inspect your rendered .css file on your machine you’ll see what actually goes in the part.
I’d consider choosing fewer CSS and JS approaches as well as they can add to total size of the page and conflict and its just overhead to be good at them all.
Also see if you can find a way to show content without relying on the spinning animation. I viewed the page without JS initially on and it sticks there. So if google crawls your site and has to execute JS it will not get so far. So you’ll lose search ranking
And some search engines won’t even try and execute JS.