1

I want to display 3 button which contains 5 values side by side. I want to enhance the display of the button.

Example:

1    aombhkjsdhffhf   hehehe     4   5
2    khdjhfhf         dhjfhj     6   7
3    hhkjhdjkhdjh     jhkjhjkh   8   9

So, each line above needs to be on a button. So I have 3 buttons, but the display on the buttons needs to be as if I am displaying a table. Do you have any suggestions?

2
  • You could just make the table cells look like buttons: td { border: 1px outset #666; bg: .. }
    – mario
    Apr 1, 2011 at 21:39
  • 2
    Somewhere a UI Developer about to punch a furry bunny....for useability's sake, how about a more sane looking button with a tooltip to present extended data? Apr 1, 2011 at 21:58

2 Answers 2

3

You can put a table inside of the <button> tag.

<button>
    <table>
    <tr>
    <td>1</td>
    <td>aombhkjsdhffhf</td>
    <td>hehehe</td>
    <td>4</td>
    <td>5</td>
    </tr>
    </table>
</button>
<br>
<button>
    <table>
    <tr>
    <td>2</td>
    <td>khdjhfhff</td>
    <td>dhjfhj</td>
    <td>6</td>
    <td>7</td>
    </tr>
    </table>
</button>
<br>
<button>
    <table>
    <tr>
    <td>3</td>
    <td>hhkjhdjkhdjk</td>
    <td>jhkjhkjh</td>
    <td>8</td>
    <td>9</td>
    </tr>
    </table>
</button>

and define the css so that the td element has a certain width:

td{width:100px;}

See sample on JSFiddle.

3
  • Hey thank you so much. This is exactly my requirement. But, I need to get this thing done with submit button, i.e, with the input tag with type="submit". Sorry, that I told it now, but this is my requirement.
    – Shilpa
    Apr 4, 2011 at 15:25
  • So, now all the 3 buttons are submit buttons, and if I click any one, each redirects to its own page.
    – Shilpa
    Apr 4, 2011 at 15:30
  • Hey I got the output...<button type="submit"........... Thanks a lot! It really heleped
    – Shilpa
    Apr 5, 2011 at 14:34
0

This sounds like something you could easily handle with css and javascript. In other words, render a normal html table, use CSS to make each row look like a button, and use javascript to tie an event handler to each row's click.

Html

<table>
  <tr class="button">
    <td>aombhkjsdhffhf</td>
    <td>hehehe</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr class="button">
    <td>khdjhfhf</td>
    <td>jhkjhjkh</td>
    <td>6</td>
    <td>7</td>    
  </tr>
  <tr class="button">
    <td>hhkjhdjkhdjh</td>
    <td>dhjfhj</td>
    <td>8</td>
    <td>9</td>    
  </tr>
</table>

Css

tr.button {
  /* the css to make each row look like a button */
}

Javascript

// using jQuery
$('tr.button').click(function() {
  // do whatever here.
});
1
  • It would take a bit of work to make a table row look like a button, especially if it simulated hovering and pushing. Apr 1, 2011 at 21:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.