Kompx.com or Compmiscellanea.com

Mobile-friendly HTML table

Windows : Internet Explorer 10.0+, Firefox 1.5+, Google Chrome, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.5+, Google Chrome / Chromium, Opera 9.5+, SeaMonkey 1.0+ [ 2 ].

If an HTML table is too wide, having too much data, it may not shrink anymore, it gets wider than the available space and breaks page layout. An horizontal scroll added to the table fixes it up. Example:

12345678910
Table_data_1 Table_data_2 Table_data_3 Table_data_4 Table_data_5 Table_data_6 Table_data_7 Table_data_8 Table_data_9 Table_data_10

HTML / XHTML. Code:

<table>

<tr>

<th>1</th>

<th>2</th>

<th>3</th>

<th>4</th>

<th>5</th>

<th>6</th>

<th>7</th>

<th>8</th>

<th>9</th>

<th>10</th>

</tr>

<tr>

<td>Table_data_1</td>

<td>Table_data_2</td>

<td>Table_data_3</td>

<td>Table_data_4</td>

<td>Table_data_5</td>

<td>Table_data_6</td>

<td>Table_data_7</td>

<td>Table_data_8</td>

<td>Table_data_9</td>

<td>Table_data_10</td>

</tr>

</table>

CSS. Code:

table {display: block; overflow-x: auto;}

/* Extra CSS, just styling the look: */

table {border-collapse: collapse;}

table td,th {padding: 10px; border: 1px #000 solid;}

Note: the CSS property of display: block makes the table to occupy only as much space horizontally as it is needed to contain the data without shrinking. Not more, not making itself to stretch from the leftmost to the rightmost sides of the available space - even if width: 100% is added to CSS. Example:

123
Table_data_1 Table_data_2 Table_data_3

[ 1 ]

As well as Netscape 9.0.

[ 2 ]

As well as Netscape 9.0.


Aliosque subditos et thema

 

Text-based web browsers for Linux

 

Lynx : Links : ELinks : W3m : Netrik : Retawq : Line mode browser When general public Linux distributions came around, web browsing was quite young, but with some way behind it. There were several web browsers already, many of them ported gradually to Linux. Some text-based web browsers were in the first wave. After a while Linux became the main habitat of text-based browsers, where most of them are developed and used. Even if these text-based web browsers are mostly intended not just for Linux, but for various other *nix systems as well. And there are also their ports to plenty of other operating systems for most various platforms. Lynx - / home page / Text-based web browser. Versions for Linux, FreeBSD, Mac OS X, some other *nix systems, DOS, Windows, BeOS, MINIX, QNX, AmigaOS, OpenVMS and classic Mac OS. HTML ( More 1 ) ( More 2 ) Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: lynx.isc.org Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: w3schools.com/browsers/browsers_stats.asp Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: en.wikipedia.org/wiki/Lynx_(web_browser) Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: ebay.com Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: kompx.com/en/elinks.htm Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: twitter.com Links - / home page 1 : home page 2 / Text-based web browser. Versions for Linux, FreeBSD, Mac OS X, some other *nix systems, BeOS, Haiku, OS/2, DOS, Windows.

JavaScript form submit

 

Submitting a form using JavaScript. A dropdown list (form + select + multiple options) is processed without any submit button. Example: --- Select a page --- Linux Windows DOS HTML / XHTML. Code: <form action="action.php" method="post"> <select name="page" required="required" onchange="this.form.submit()"> <option value="" selected="selected" disabled="disabled"> --- Select a page --- </option> <option value="http://www.kompx.com/en/os/linux-1.htm">Linux</option> <option value="http://www.kompx.com/en/os/windows-1.htm">Windows</option> <option value="http://www.kompx.com/en/os/dos-1.htm">DOS</option> </select> <noscript><input type="submit" value="Submit" /></noscript> </form> When an option has been chosen from the dropdown list, the form's state is changed. So the onchange event occurs and JavaScript code in onchange is executed: the process of the form submission in started by the script, not by clicking submit button which is absent. Some server-side script [ 3 ] is meant then to handle the form action. The script is supposed to get what the form sends and have it processed. A PHP script in action.php is used in the example: <?php if (isset($_POST["page"])) {     header("Location: $_POST[page]");     exit; } else {     echo "No options selected"; } $_POST is an array of variables passed to the current script via the HTTP POST method. So $_POST[page] contains the content of the value attribute in a select option. That is, a URL. It is passed from form to PHP script and the script redirects browser to the URL / page selected. HTML code of <noscript><input type="submit" value="Submit" /></noscript> is present in the form as a fallback in case JavaScript happens to be turned off. Then there is a submit button to appear and the form is usable anyway. [ 1 ] As well as Netscape 3.04+, Mozilla 0.6+. [ 2 ] As well as Netscape 3.04+, Mozilla 0.6+. [ 3 ] If a CMS is used, form action may be handled by some of its inbuilt means.