CSS for adding a table

Do you recommend a particular CSS resource for adding a table to a page? Thank you.

As far as I know, the only way to add a table currently is to use HTML table elements (<table>, <td>, etc.),
but they donā€™t appear to take on any styling (e.g., elements are aligned correctly in a table, but donā€™t show borders).
I created a new test blog and tested some custom CSS in my blog settings and it does apply if you create an HTML table within your blog post. I copied/pasted the example from this tutorial for a quick test: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro, but I put everything in the <style> tags in my custom CSS in blog settings (and delete the opening and closing <html> and <head> tags)

A more elegant solution would be available in extended markdown, as discussed briefly here: New formatting syntaxes
Someone with a bit more HTML/CSS experience might be able to weigh in with a better answer

1 Like

You can add tables with Markdown, as well. Hereā€™s a test post (source).

We actually should format the first kind of table in that post, but it will turn into a table if you add headers like we show there.

2 Likes

Well I learned something new today! Do you think that could be added here for us noobs?

1 Like

This is great. I definitely prefer Markdown. I went to the Table Demo page, but couldnā€™t click on the link to see the markdown behind the post. The click wouldnā€™t work. Hope Iā€™m tracking right.

Absolutely, weā€™ll be sure to add that in.

Fixed the link, thanks!

Thank you, Matt. I feel slow, again. Does the markdown to create the table get added directly on the blog page ā€“ or does it get added to the page source? I apologize for such basic questions. Also, when I look at the table demo, it looks the same as the source example at the link. Is that right? Iā€™m missing somet obvious things.

Add the Markdown to your post to create a ā€˜tableā€™ in your post.

| Tables   |      Are      |  Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |
Tables Are Cool
col 1 is left-aligned $1600
col 2 is centered $12
col 3 is right-aligned $1

This might help with their creation: https://www.tablesgenerator.com/markdown_tables

1 Like

Awesomeness. Thank you!

One question. How can I create more space between columns? I tried to figure it out through the link, but Iā€™m stuck. Any help appreciated.

Use &ensp; to add a TAB spacing. Or use &nbsp; to add character spacings.

Like:

| Tables  |    Are    |  ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |
Tables Are ā€‚ā€‚ā€‚ā€‚ā€‚ā€‚ā€‚ā€‚ā€‚ā€‚ā€‚ā€‚Cool
col 1 is left-aligned $1600
col 2 is centered $12
col 3 is right-aligned $1
1 Like

lhl, thank you. I was having trouble at first with the first ā€œenspā€ showing up in my table. Then I realized the first one needed an & in front of it, so it worked. But Iā€™m not sure how yours came out okay since that first ā€œenspā€ doesnā€™t have an & in front of it. Either way, thanks!

This is how it looked before I added the & in front of the ā€œenspā€:

Oh, no, now I have another question. How can I make the headings line up? See my problem

?

Left Aligned

| Service |   &ensp;&ensp;&ensp;&ensp;Charge   
|----------|-------------
|**'Meta' Descriptions** (Webpage summaries in search engine searches)| &ensp;&ensp;&ensp;&ensp;starting at $25
|**Photo Captions**| &ensp;&ensp;&ensp;&ensp;starting at $20
|**Keywords** (integrated into existing pages)| &ensp;&ensp;&ensp;&ensp;starting at $50 per page
|**Proofreading** (spelling, punctuation, basic grammar)| &ensp;&ensp;&ensp;&ensp;starting at $75 per page
Service ā€‚ā€‚ā€‚ā€‚Charge
ā€™Metaā€™ Descriptions (Webpage summaries in search engine searches) ā€‚ā€‚ā€‚ā€‚starting at $25
Photo Captions ā€‚ā€‚ā€‚ā€‚starting at $20
Keywords (integrated into existing pages) ā€‚ā€‚ā€‚ā€‚starting at $50 per page
Proofreading (spelling, punctuation, basic grammar) ā€‚ā€‚ā€‚ā€‚starting at $75 per page

Centered

| Service |   Charge   
|:----------:|:-------------:
|**'Meta' Descriptions** (Webpage summaries in search engine searches)|starting at $25
|**Photo Captions**|starting at $20
|**Keywords** (integrated into existing pages)|starting at $50 per page
|**Proofreading** (spelling, punctuation, basic grammar)|starting at $75 per page
Service Charge
ā€™Metaā€™ Descriptions (Webpage summaries in search engine searches) starting at $25
Photo Captions starting at $20
Keywords (integrated into existing pages) starting at $50 per page
Proofreading (spelling, punctuation, basic grammar) starting at $75 per page

Right Aligned

| Service |   Charge   
|----------:|-------------:
|**'Meta' Descriptions** (Webpage summaries in search engine searches)|starting at $25
|**Photo Captions**|starting at $20
|**Keywords** (integrated into existing pages)|starting at $50 per page
|**Proofreading** (spelling, punctuation, basic grammar)| &ensp;&ensp;&ensp;&ensp;starting at $75 per page
Service Charge
ā€™Metaā€™ Descriptions (Webpage summaries in search engine searches) starting at $25
Photo Captions starting at $20
Keywords (integrated into existing pages) starting at $50 per page
Proofreading (spelling, punctuation, basic grammar) ā€‚ā€‚ā€‚ā€‚starting at $75 per page

Notice the use of : to align columns. Also notice that to make space between columns there is a variable use of the &ensp; code. I had to play a little with inserting &ensp; to find what worked and what didnā€™t in terms of column spacingā€¦!

1 Like

lhl, thank you. But what Iā€™m talking about is making sure the top line of each description lines up across. It appears the descriptions only line up perfectly across if they are only one line and donā€™t wrap around. Do you see what I mean?

Oh. I see. You meant Vertical Align.

I tried playing with:
#post-body tbody { vertical-align: top!important; }

But couldnā€™t get this to work outside of Drafts for some reason. The elements to target would be those within table:
table
tbody
tr
td

This effect might also be influenced by the version of Markdown that WriteAs / WriteFreely uses and also by the width of the containing element forcing the alignmentā€¦?

It is beyond my CSS / Markdown Fuā€¦ :slight_smile:, sorry!

Maybe @matt can be of more helpā€¦?

Thank you, lhl. I could have made the question a lot easier to begin with by just saying ā€œvertical align.ā€ Thanksā€¦just wondering. Should I contact Matt directly elsewhere on this?

The following should work so that the ā€˜Chargeā€™ column entry ā€˜starting at $25ā€™ is vertically at the top rather than vertical center:

Add enough &ensp; to the end of ā€˜starting at $25ā€™ until the &ensp; results in a wrap to the next line in that column. Then the ā€˜starting at $25ā€™ will be vertically aligned at the top to match the vertical alignment in the ā€˜Serviceā€™ column. This is somewhat kludgy but it should work. It worked in similar situations that I had.

Iā€™m sure @matt or one of his team could add more pertinent Markdown / CSS knowledge into this thread with regards to how WriteFreely / WriteAs react to custom CSS per instance or how the flavour of Markdown influences the layout etc.

For a reason unknown to my level of knowledge I was unable to target the table via Custom CSS. It seemed to not matter what element I targeted (IDā€™d or named), customised CSS had no effect. I could only affect the styling via the Dev Tools in Firefox.

Another way. Instead of using markdown, you can insert HTML directly into your post:

<table>
<thead>
<tr>
<th style="text-align:left">Service</th>
<th style="text-align:left">Charge</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">
<strong>ā€™Metaā€™ Descriptions</strong> (Webpage summaries in search engine searches)</td>
<td style="text-align:left">starting at $25</td>
</tr>
<tr>
<td style="text-align:left"><strong>Photo Captions</strong></td>
<td style="text-align:left">starting at $20</td>
</tr>
<tr>
<td style="text-align:left">
<strong>Keywords</strong> (integrated into existing pages)</td>
<td style="text-align:left">starting at $50 per page</td>
</tr>
<tr>
<td style="text-align:left">
<strong>Proofreading</strong> (spelling, punctuation, basic grammar)</td>
<td style="text-align:left">starting at $75 per page</td>
</tr>
</tbody>
</table>

Then style the table / table cells directly with inline CSS.

1 Like

bugbuster, thank you for the workaround. I got it to work with moving the one line up ("starting at $25ā€™). But then I couldnā€™t move the other lines down in order to make them align vertically. I tried numerous ways. Unless you have a simple suggestion, it doesnā€™t seem promising. Thanks a lot.