Centering a table that is centered in page in markdown

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.

I was about to say the same thing. I use the align attribute a lot especially where CSS is not possible like on a README.md file.

<div align="center">

<table>
</table>

</div>

It works with markdown too, if you don’t indent it

<div align="center">

## My title

![My image](logo.png)

</div>

Using CSS - see this tutorial that says align is deprecated (but it works for now) and that text-align won’t work on the table itself.

 <table class="center">
    ...
  </table>
  table.center {
    margin-left:auto; 
    margin-right:auto;
  }

Another source

table {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

source https://www.w3schools.com/css/css_align.asp

Ah, thank you, I have now replaced all table aligns with the margin style tags.

1 Like

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.

For the record, I am trying to convert from this page and the blog.

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.

I see you’ve already got the CSS setup for a few approaches.

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).

Right click Inspect element on your table and check applied CSS

It looks centered to me

Also rather make one CSS file for your entire site. It only takes you request to get everything on a post page.

And even on the homepage its only a bit of CSS needed

You can also use SCSS to bundle multiple CSS files into one. See jekyll docs and the import syntax

Eg https://github.com/MichaelCurrin/coding-blog/blob/master/assets/css/style.scss

Or

---
---
$primary: rgb(137, 181, 223) !default;

// Import theme's files. 
@import "_variables.scss";
@import "_mixins.scss";
@import "_global.scss";
@import "_navbar.scss";
@import "_masthead.scss";
@import "_services.scss";
@import "_portfolio.scss";
@import "_timeline.scss";
@import "_team.scss";
@import "_contact.scss";
@import "_footer.scss";

/** Custom content **/

// This must be placed here so that includes work.
header.masthead {
  // A higher value will make the photo appear more zoomed in.
  padding-top: inherit;

  // Move background image down.
  margin-top: 30px;
}

It isn’t loading the background or other style information involved:
Original Site
Github Built Site
Local Server (after removing _site/ and .jekyll-* files:


Thats my main issue that I am seeing after loading it into Github.

Does jekyll serve serve CSS differently than github pages?

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.

Your background path is valid

Yet that .hero style never appears if I search for “hero” here:

https://delize.github.io/assets/css/style.css

You have both style.css and style.sass in assets so my guess they are conflicting - style.sass will output as style.css

Rename style.css to custom-style.css and you might have to import it in your .sass file, your reference it as a standalone file.

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:

When this line is uncommented.

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.

1 Like

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.

What you can try is rather set CSS on each page.

E.g. for your post template you can do this

---
layout: default 
---
<style>
.post-hero {
  background-url: url("{{ page.my_background }}")
}
</style>

<div class="post">
  {{ content }}
</div>

Remember you can put style tag anywhere on the page in the head or body. Here it will be in the body.

Or for a more correct solution you need to update your head.html to include a style tag like the above which you can do after it is working

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.

For interest here is my blog. I use a Jekyll GH Pages theme so the CSS is mostly in the theme itself.

Thanks, will give this a shot.