Table Creation

srinik

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.

Upload the image
Publish the post.
Copy the image address by right clicking on it.
Using this format
![alt text](http://domain.com/image-address.jpg "My custom Alt text here")
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.