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

 

CSS for a range of elements

 

Styling a range of elements. Here from the 1st to the 3rd one - changing background color. Example:         HTML / XHTML. Code: <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> CSS. Code: div:nth-of-type(-n+3) {background: #f66;} /* Extra CSS, just styling the look: */ div {width: 100%; margin-top: 5px; background: #066;} Note: nth-child may also be used instead.

HTML centering

 

Centering the whole content of a web page in the viewable area of a browser by pure HTML - no CSS. A box to keep the content of the page is HTML centered horizontally and vertically - [ Open demo page ] HTML. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>HTML centering</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"> </head> <body bgcolor="#ffffff"> <table width="100%" height="100%" bgcolor="#a3ddc4"> <tr> <td align="center"> <table width="800" height="500" bgcolor="#ff6f6f"> <tr> <td>&nbsp;</td> </tr> </table> </td> </tr> </table> </body> </html> The outer HTML table makes the whole web browser viewable area, except margins, a HTML table and the whole area of this HTML table - a HTML table cell. The cell of the outer HTML table inherits the default value for valign attribute from its parent table row. And this row in its turn inherits the default value for valign attribute from the outer HTML table tbody - even if tbody tag is not used. And that value is middle. So a block of content inside the cell of the outer HTML table is centered vertically in web browser viewable are. Align="center" of the outer HTML table cell makes a block of content inside it centered horizontally in web browser viewable are. The inner table, the one inside of the outer HTML table cell makes up a box of a given size. Or there may be no set height or no set width or both. Then the size of the box is to adjust to accommodate the content, whatever its dimensions are. If the width or height or both of the box results to be larger than web browser viewable area, then it still ends up to be centered. Since HTML centering is the oldest method to center content horizontally and vertically, it works well not just in older web browsers, but in ones that can be described as downright ancient. Like adding one more HTML tag ( <center></center> ) around the outer table makes it funcion as deep as Internet Explorer 3 : [ Open demo page ] Download Internet Explorer 3: a pack, containing 3.0, 4.01, 5.01, 5.5, 6.0 versions of Internet Explorer HTML.