Can I display html table on html button?

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 but开发者_如何转开发ton. 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?

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.

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