CODEWITHSUNDEEP
cssgithubgridviewmarkdown
Jo_L
Jo_L

Reputation: 189

Positioning image in github markdown table

I have some content which does not take up the entire column. so I was trying to postion an image to that side so that it saves some space.

lesswidth image

I tried checking for grid layouts or column layout in md but none of it has provided info on how to do it

This is what i am looking for

expectation

the code is @ here

... thanks

Upvotes: 0

Views: 826

Answers (1)

elena.kim
elena.kim

Reputation: 958

The Markdown table does not support cell merge by default, so you should use HTML table.
And in comment, you said

"Even this time the image took only one row, ..."

in this case just use rowspan.

<table>
   <tr>
      <td>- Identifying cutomer needs (requirments)</td>
      <td rowspan="11">
        <img src="https://user-images.githubusercontent.com/74305823/118094261-783e8280-b409-11eb-8f50-8ed0b304fef0.png" width="300"/>
     </td>
   </tr>
   <tr>
      <td>- market analysis (requirements)</td>
   </tr>
   <tr>
      <td>- defining goals (requirements)</td>
   </tr>
   <tr>
      <td>- Establishing functions (Prodct concept)</td>
   </tr>
   <tr>
      <td>- Task Specifications (Prodct concept)</td>
   </tr>
   <tr>
      <td>- Conceptualizatoin (Solution concept)</td>
   </tr>
   <tr>
      <td>- Evaluating Alternatives</td>
   </tr>
   <tr>
      <td>- Emnodiment Design</td>
   </tr>
   <tr>
      <td>- Analysis and Optimization</td>
   </tr>
   <tr>
      <td>- Experiment</td>
   </tr>
   <tr>
      <td>- Marketing</td>
   </tr>
</table>

EDIT

AS @tarleb said, using <ul>...</ul> tag can be more simple.

<table>
   <tr>
     <td>
       <ul>
         <li>Identifying cutomer needs (requirments)</li>   
         <li>market analysis (requirements)</li>  
         <li>defining goals (requirements)</li> 
         <li>Establishing functions (Prodct concept)</li>  
         <li>Task Specifications (Prodct concept)</li> 
         <li>Conceptualizatoin (Solution concept)</li>   
         <li>Evaluating Alternatives</li> 
         <li>Emnodiment Design</li>
         <li>Analysis and Optimization</li>
         <li>Experiment</li>    
         <li>Marketing</li> 
       </ul>
     </td>
     <td>
       <img src="https://user-images.githubusercontent.com/74305823/118094261-783e8280-b409-11eb-8f50-8ed0b304fef0.png" width="300"/>
     </td>
   </tr>
</table>

Upvotes: 3

Related Questions