Table Creation

[srinik]

Hello! I'm new to this community. Recently, installed nodeBB. Facing few problems such as table creation and uploading the images.

Can I know how to create a simple table in the post?

Thanks in advance.
Srinik

[yariplus]

Simple MD tables are supported by default

|   |   |   |
|:-:|:--|--:|
| Centered | Left | Right |
| Example Text | Example Text | Example Text |

Becomes:

Centered	Left	Right
Example Text	Example Text	Example Text

You will likely want to set some styles in the Custom CSS section of the admin panel.

[srinik]

@yariplus

Thank you, yariplus!

I'm still confused. Could you let me know with this example?
I want to display a simple 4 by 4 table with alphabets as the heading and the numerical as the entries.

ABCD EFGH HIJK LMNO
1 2 3 4
1 2 3 4
1 2 3 4

[yariplus]

@srinik Sure

Check here for a good reference.

|ABCD|EFGH|IJKL|MNOP|
|---|---|---|---|
|1|2|3|4|
|1|2|3|4|
|1|2|3|4|
|1|2|3|4|

Becomes:

ABCD	EFGH	IJKL	MNOP
1	2	3	4
1	2	3	4
1	2	3	4
1	2	3	4

[srinik]

@yariplus That's amazing. Thank U once again.

Made it ..but the table is aligned left.
Do I need to use any custom CSS for such good work?
I would like to use the CSS mentioned at https://community.nodebb.org/topic/6293/markdown-tables.
Still, the alignment is towards left. Can I make the whole table get placed in the center?
The same is the issue with image alignment.
Looking forward to your inputs.

...Srinik

[yariplus]

If you want it to be centered but not full width, use margin auto.

table
{
  font-size: 14px;
  border-collapse: collapse;
  margin: 20px auto; //
  padding: 0;
}

[yariplus]

To center images, you need to set it's display mode to block as well.

[component="post/content"] img {
  margin: auto;
  display: block;
}

[srinik]

@yariplus

Thank you, I could make the table centered by using margin auto in the custom css.
However, I couldn't make the image block.

Let me tell you the procedure that I'm following.

1. Upload the image
2. Publish the post.
3. Copy the image address by right clicking on it.
4. Using this format
   ![alt text](http://domain.com/image-address.jpg "My custom Alt text here")
5. Again publish the post.

Is it the required procedure to upload an image with alt text?
If so where should I use your above-mentioned display block code?

I'm sorry for the noob query.

[noobbb]

ok. np.

[srinik]

@noobbb

Please do not hijack the thread. I'm eagerly waiting for the fix. Sorry.

@yariplus

Waiting for your reply.

[yariplus]

@srinik Hmm, it should still center the image with alt text. Maybe you have some other style that is overriding it? You can try adding important to the rules above.

[component="post/content"] img {
  margin: auto !important;
  display: block !important;
}

[srinik]

@yariplus

It's working perfectly. I'm using the default theme ... by adding important, I could now center the image. Thank you. You made my day.