Vzupo
Vzupo

Reputation: 1468

format the table to include a button next to each previous area

i am simply trying to have 3 columns in a table. I do have 3, but the issue is in the 3rd column, there needs to be a button that lines up with the topics under competencies. So in the example, there are 2 topics- drive results and take responsibility. In the 3rd row, next to each of these topics a button needs to display. I have been struggling trying to make this work.

                  <table class="table">
                                <thead>
                                    <tr>
                                        <th class="tableHeader">Values</th>
                                        <th class="tableHeader">Competencies</th>
                                         <th class="tableHeader">Location</th>
                                        

                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <img src="images/accountable.jpg">
                                        </td>
                                        <td>
                                            <!--inner table open-->
                                            <table>
                                                <tr>
                                                    <td class=""><dt>Drive Results</dt>
                                                        <dd style="margin:20px;">Hlorem lorem lorem lorem ipsom lorem lorem lorem lorem ipsom</dd>
                                                        <dd style="margin:20px;">lorem lorem lorem lorem ipsom lorem lorem lorem lorem ipsom</dd>
                                                    </td>




                                                </tr>
                                                <tr>
                                                    <td class=""><dt>Take Responsibility</dt>
                                                        <dd style="margin:20px;">lorem lorem lorem lorem ipsom lorem lorem lorem lorem ipsom</dd>
                                                        <dd style="margin:20px;">Plorem lorem lorem lorem ipsom</dd>
                                                    </td>



                            </table>

Upvotes: 0

Views: 41

Answers (1)

tarun joshi
tarun joshi

Reputation: 107

Follow the proper table format.

<table>
  <tr>
    <th class="tableHeader">Values</th>
    <th class="tableHeader">Competencies</th>
    <th class="tableHeader">Location</th>
  </tr>
  <tr>
    <td>1</td>
    <td class=""><dt>Drive Results</dt>
      <dd style="margin:20px;">Hlorem lorem lorem lorem ipsom lorem lorem lorem lorem ipsom</dd>
      <dd style="margin:20px;">lorem lorem lorem lorem ipsom lorem lorem lorem lorem ipsom</dd>
    </td>
    <td><button type="button">Click Me</button> </td>
  </tr>
  <tr>
    <td>2</td>
    <td class=""><dt>Take Responsibility</dt>
      <dd style="margin:20px;">lorem lorem lorem lorem ipsom lorem lorem lorem lorem ipsom</dd>
      <dd style="margin:20px;">Plorem lorem lorem lorem ipsom</dd>
    </td>
    <td><button type="button">Click Me</button> </td>
  </tr>
</table>

Upvotes: 1

Related Questions