A cool effect you can do with CSS/HTML is to position a button (or any element really) at the top right hand side of a table. For example you could use this to refresh the contents of the table when the button is clicked. It’s intuitive to the user and is a subtle way to add functionality that is only apparent when it is needed.
Summary:
As I mentioned, there are two simple ways to position the button at the top right hand side of a table element.
The simplest way is to add the button to an element within the table (a th or a td element) and then to position the button absolutely. This obviously isn’t the most elegant way and will be more difficult to read and understand later.
The second way is to encapsulate your table in a span element and then tell the span that it needs to tightly fit the nested table. You can then add the button to the span element and position it absolutely relative to the span. The trick here is to get the span to occupy space and wrap the table rather than expanding to fit the width of the page.
The First Way: Embed the button in a th element and then position it
The simplest (but less maintainable) way to put your button element somewhere inside your table and then set the button to be positioned absolutely within the table. Don’t forget to set the CSS of your table to position:relative so that the absolute positioning of the button knows to position itself within the table itself rather than the page.
The Second (and best) Way: Embed the table in a span tag and position the button relative to the span
This is probably your best bet for a maintainable way to code a button at the top right of a table element. You’ll use an encapsulating span tag containing both your table and button elements. By default the span tag doesn’t occupy physical space (unlike a div), so you’ll need to set the CSS display property of your span to display:inline-block . This will make sure that the span will wrap around your embedded table so that you can position your button to the top right of the table. This is just slightly more complicated than embedding the button inside of the table itself, but will be a lot more intuitive when you try to read the HTML later.
Example Page for Way#1: positioning within the table itself
<!DOCTYPE html> <html> <head></head> <style> </style> <body> This is a test of adding a form (button) element to the top right hand side of an HTML table<br><br> <table id="tblMain" style="width:400px;border:1px solid black;background:yellow;position:relative;"> <tr> <th>Row</th> <th>Pet</th> <th>Name <input type="button" value="some text" style="position:absolute;top:-15px;right:-10px;"> </th> </tr> <tr> <td>Row 1</td> <td>Cat</td> <td>Mittens</td> </tr> <tr> <td>Row 2</td> <td>Mouse</td> <td>Squeek</td> </tr> <tr> <td>Row 3</td> <td>Rabbit</td> <td>Fred</td> </tr> </table></body>
Example Page for Way#2: using an encapsulating span tag
<!DOCTYPE html> <html> <head></head> <style> </style> <body> This is a test of adding a form (button) element to the top right hand side of an HTML table<br><br> <span id="spanSurrounder" style="position:relative;margin:10px;display:inline-block;"> <table id="tblMain" style="width:400px;border:1px solid black;background:yellow;"> <tr> <th>Row</th> <th>Pet</th> <th>Name </th> </tr> <tr> <td>Row 1</td> <td>Cat</td> <td>Mittens</td> </tr> <tr> <td>Row 2</td> <td>Mouse</td> <td>Squeek</td> </tr> <tr> <td>Row 3</td> <td>Rabbit</td> <td>Fred</td> </tr> </table> <input type="button" value="some text" style="position:absolute;top:-15px;right:-10px;"> </span></body>
Justin Cooney 