Table Creation



  • 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


  • Community Rep

    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.



  • @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


  • Community Rep

    @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


  • @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


  • Community Rep

    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;
    }
    

  • Community Rep

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

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


  • @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.



  • ok. np.



  • @noobbb

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

    @yariplus

    Waiting for your reply.


  • Community Rep

    @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;
    }
    


  • @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. :+1:


Log in to reply
 

Looks like your connection to NodeBB was lost, please wait while we try to reconnect.