|" lines staying parallel to each other, can someone help me adjust the lines so the table is alined properly.

Question

Thank you.

Main Class:

OUTPUT:

UPDATED MAIN CLASS:

void printGui(const board_t* board)
{
    printf("Welcome to the Gui of the Game:\n");

    int i, j;
    char hash = '#';
    char x = 'X';

    for(i = 0; i < board->height; i++)
    {
        for(j = 0; j < board->width; j++)
        {        
             if(board->gui[i][j].graphics == 'X')
            {
                printf(RED "| %c|" RESET, x);

            }

            else
            {

                printf(BLUE "| %c  |" RESET, board->gui[i][j].graphics );



            }
        }
        printf("\n");
    }
}  

UPDATED OUTPUT:

|   || A  || B  || C  || D  || E  |
| 1  || #  ||   ||   ||   ||   |
| 2  || #  ||   || #  || #  ||   |
| 3  || #  ||   ||   ||   ||   |
| 4  ||   || #  || #  || #  ||   |

MY GOAL:

void printGui(const board_t* board)
{
    printf("Welcome to the Gui of the Game:\n");

    int i, j;
    char hash = '#';
    char x = 'X';

    for(i = 0; i < board->height; i++)
    {
        for(j = 0; j < board->width; j++)
        {        


            if(board->gui[i][j].graphics == '\0')
            {
                //printf("\033[0;34m");
                printf(BLUE "| %c |" RESET, hash);
                //printf("\033[0m");
            }
            /*
            if(board->gui[i][j].graphics == x)
            {
                printf(RED "| %c |" RESET, x);

            }
            */

            else
            {

               printf(BLUE "| %c |" RESET, board->gui[i][j].graphics );

            }
        }
        printf("\n");
    }
}

So after I did some major configuration^^^, it show the table properly but not with the function that I want.

| # || A || B || C || D || E |
| 1 || # || # || # || # || # |
| 2 || # || # || # || # || # |
| 3 || # || # || # || # || # |
| 4 || # || # || # || # || # |

So my goal is to when the user input a coordinates example 'B2', which will then change the spot into 'X' with a Red colour. But right now it doesnt change any colours so thats what I am stuck at.

X OUTPUT:

So this table is like a BatteShip game so there are ships hidden on the table which is display as '#' so the player dont know where the ships are and then when the user enter the coordinates example B2 it will display X because there is nothing there, but if I put A1 then it will display '0' because there is a ship there. So my point is to change the colour of the 'X' into red cause right now the board is all same colour even when the hit or not hit.

ANOTHER OUTPUT:

| # || A || B || C || D || E |
| 1 || # || # || # || # || # |
| 2 || # || X || # || # || # |
| 3 || # || # || # || # || # |
| 4 || # || # || # || # || # |

After editing the if statement with this:

I end up getting up this OUTPUT:

| # || A || B || C || D || E |
| 1 || 0 || X || # || # || # |
| 2 || # || # || 0 || # || # |
| 3 || 0 || X || # || # || # |
| 4 || # || # || # || # || # |

The 0 becomes RED which is a good news but then other spots becomes blank and then the table become disoriented?Any idea?

if(board->gui[i][j].graphics == '0')
{
    printf(RED "| 0 |" RESET);
}
else
{
    printf(BLUE "| %c |" RESET, board->gui[i][j].graphics);
}

|  || A || B || C || D || E |
| 1 || 0 ||  ||  ||  ||  |
| 2 || # ||  || # || # ||  |
| 3 || # ||  ||  ||  ||  |
| 4 ||  || # || # || # ||  |

I am having tiny issue making these "