{"id":28642,"date":"2017-05-29T03:01:52","date_gmt":"2017-05-28T17:01:52","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=28642"},"modified":"2017-09-21T13:04:37","modified_gmt":"2017-09-21T03:04:37","slug":"table-cell-like-button-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/table-cell-like-button-primer-tutorial\/","title":{"rendered":"Table Cell like Button Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/target_share_challenge.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Table Cell like Button Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/target_makeover.jpg\" title=\"Table Cell like Button Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Table Cell like Button Primer Tutorial<\/p><\/div>\n<p>Today we have a mix of CSS makeover and common sense UX design themes.  We recently revisited our <a target=_blank title='PHP Target Word Game Mobile Friendly Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-target-word-game-mobile-friendly-tutorial\/'>PHP Target Word Game Mobile Friendly Tutorial<\/a>, playing it via the Safari web browser on an iPhone, and noticed two annoying things about it, those being &#8230;<\/p>\n<ul>\n<li>we think we&#8217;d like to have the 3&#215;3 grid of letters to chose to be more impactive looking &#8230; <\/li>\n<li>we think we&#8217;d like to have the 3&#215;3 grid of letters be clickable and that functionality be like clicking the <i>Propose a Word<\/i> button<\/li>\n<\/ul>\n<p> &#8230; where, with that second one, it would be like killing two birds with one stone because that <i>Propose a Word<\/i> button sometimes falls <a target=_blank title='Google search for Below the Fold' href='https:\/\/www.google.com.au\/search?q=below+the+meld&#038;oq=below+the+meld&#038;aqs=chrome..69i57j69i61l3.3437j0j7&#038;sourceid=chrome&#038;ie=UTF-8#q=below+the+fold&#038;*'>below the fold<\/a>, an <a target=_blank title='UX information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/User_experience'>UX<\/a> sin, albeit minor, from way back.<\/p>\n<p>Today, we&#8217;d like to thank this <a target=_blank title='Great link' href='http:\/\/www.codingforums.com\/html-and-css\/67340-style-td-make-look-like-button.html'>great link<\/a> regarding CSS ideas for these <b>changes<\/b> &#8230;<\/p>\n<p><code><br \/>\n$ diff target_share_challenge.php--GETME target_share_challenge.php-GETME<br \/>\n172c172<br \/>\n&lt;  td {  border: 4px <b>outset<\/b> green; background-color: <b>lightgray; text-decoration:none; cursor:pointer;<\/b> }<br \/>\n---<br \/>\n&gt;  td {  border: 4px solid green; background-color: white;  }<br \/>\n316c316<br \/>\n&lt; &lt;tbody id='tbletters'<b> onclick='ask();' title='Propose a Word'<\/b>&gt;<br \/>\n---<br \/>\n&gt; &lt;tbody id='tbletters'&gt;<br \/>\n$<\/code><\/p>\n<p> &#8230; a lead that came from asking Google search engine <a target=_blank title=\"making a td look like a button in css\" href='https:\/\/www.google.com.au\/search?q=making+a+td+look+like+a+button+in+css&#038;oq=making+a+td+look+like+a+button+in+css&#038;aqs=chrome..69i57.10441j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>making a td look like a button in css<\/a> &#8230; thanks everyone.<\/p>\n<p>Coding wise we have some PHP you could call <a target=_blank title='target_share_challenge.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/target_share_challenge.php--GETME'>target_share_challenge.php<\/a> that you can try for yourself with this <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/target_share_challenge.php'>live run<\/a> link, and which changed for the small Target Game &#8220;makeover&#8221; in <a target=_blank title='target_share_challenge.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/target_share_challenge.php--GETME'>this way<\/a>.<\/p>\n<p>We really hope this is food for thought for you.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d28642' onclick='var dv=document.getElementById(\"d28642\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/preemptive\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28642' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we have a mix of CSS makeover and common sense UX design themes. We recently revisited our PHP Target Word Game Mobile Friendly Tutorial, playing it via the Safari web browser on an iPhone, and noticed two annoying things &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/table-cell-like-button-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,15,17,37],"tags":[2149,174,1580,281,476,477,932,997,1238,1581,1319,1350,1356,1453],"class_list":["post-28642","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-gui","category-tutorials","tag-above","tag-button","tag-cell","tag-css","tag-game","tag-games-2","tag-php","tag-programming","tag-table","tag-table-cell","tag-tutorial","tag-user-experience","tag-ux","tag-word-game"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28642"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=28642"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28642\/revisions"}],"predecessor-version":[{"id":33094,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28642\/revisions\/33094"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=28642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=28642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=28642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}