Can I display html table on html button? - html

Question

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?

Answer 1

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.

Answer 2

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