/** * @author mithun */
table{
margin: auto;
border-collapse:collapse;
font-family:Lucida Grande, Verdana;
font-size:16px;
text-align: center;
width:80%;
}
table td,table th{
padding:2px;
font-weight:normal;
padding: 2px;
}
table th{
font-weight:bold;
}
table.aquamarine{
border: 1px solid #050;
}
table.aquamarine tr th,
table.aquamarine tr td{
border: 1px dotted #050;
}
table.aquamarine tr th{
background-color: #48a474;
color: #ccffcc;
}
table.aquamarine tr td{
background-color: #ded;
}
table.aquamarine tr.alt td{
background-color: #b8dcc1;
}
table.aquamarine tr:hover td{
background-color: #7fc08f;
color: #ccffcc;
}
table.blue{
border: 1px solid #94beff;
}
table.blue tr th,
table.blue tr td{
border: 1px dotted #94beff;
}
table.blue td, table th {
background-color: #94beff;
background-image:url(../images/bg-head.gif);
background-repeat:no-repeat;
background-position:top right;
}
table.blue td.selectedUp,
table th.selectedUp {
background-image:url(../images/bg-headup.gif);
}
table.blue td.selectedDown,
table th.selectedDown {
background-image:url(../images/bg-headdown.gif);
}
table.blue tr td{
background: #fff;
}
table.blue tr.alt td{
background: #e3edfa;
}
table.blue tr.selected td{
background: yellow;
}
table.blue tr:hover td{
background: #a6c2e7;
}
table.blue tr.selected:hover td{
background:#ff9;}table.cool{
border: 1px solid #6BB12B;
}
table.cool tr th,
table.cool tr td{
border: 1px dotted #91d552;
}
table.cool tr th{
background-color: #91d552;
color: #000;
}
table.cool tr td{
background-color: #d5f7b5;
}
table.cool tr.alt td{
background-color: #e7fad5;
}
table.cool tr:hover td{
background-color: #b1f075;
color: #333;
}
table.cyan{
border: 1px solid #2b8383;
}
table.cyan tr th,
table.cyan tr td{
border: 1px dotted #2b8383;
}
table.cyan tr th{
background-color: #099;
color: #cfc;
}
table.cyan tr td{
background-color: #e5f5f5;
}
table.cyan tr.alt td{
background-color: #d1f0f0;
}
table.cyan tr:hover td{
background-color: #a5e1e0;
color: #366;
}table.green{
border: 1px solid #00B366;
}
table.green tr th,
table.green tr td{
border: 1px dotted #00B366;
}
table.green tr th{
background-color: #167a61;
color: #cfc;
}
table.green tr td{
background-color: #569591;
}
table.green tr.alt td{
background-color: #63a8a8;
}
table.green tr:hover td{
background-color: #167a61;
color: #cfc;
}
table.nature{
border: 1px solid #4b6c15;
color: #040;
}
table.nature tr th,
table.nature tr td{
border: 1px dotted #4b6c15;
}
table.nature tr th{
background-color: #4b6c15;
color: #fff;
}
table.nature tr td{
background-color: #d9e8af;
}
table.nature tr.alt td{
background-color: #bcd671;
}
table.nature tr:hover td{
background: #73a800;
}
table.orange{
color: #400;
border: 1px solid #f93;
}
table.orange tr th,
table.orange tr td{
border: 1px dotted #f93;
}
table.orange tr th{
background-color: #fc0;
}
table.orange tr td{
background-color: #feb;
}
table.orange tr.alt td{
background-color: #fe9;
}
table.orange tr.selected td{
background-color: #fc9;
}
table.orange tr:hover td{
background: #fd8;
}
table.orange tr.selected:hover td{
background:#fcb;
}
table.olive{
border: 1px solid #090;
color: #040;
}
table.olive tr th,
table.olive tr td{
border: 1px dotted #090;
}
table.olive tr th{
background-color: #4B6C15;
color: #fff;
}
table.olive tr td{
background-color: #dfd;
}
table.olive tr.alt td{
background-color: #dfe;
}
table.olive tr.selected td{
background-color: #9dc;
}
table.olive tr:hover td{
background: #bfb;
}
table.olive tr.selected:hover td{
background:#9ca;
}
table.pink{
border: 1px solid #faa;
color: #400;
}
table.pink tr th,
table.pink tr td{
border: 1px dotted #faa;
}
table.pink tr th{
background-color: #f99;
}
table.pink tr td{
background-color: #fee;
}
table.pink tr.alt td{
background-color: #fdd;
}
table.pink tr.selected td{
background-color: #fcd;
}
table.pink tr:hover td{
background: #fbb;
}
table.pink tr.selected:hover td{
background:#ebc;
}
table.pink tr th.selectedUp{
background-color: #f99;
}
table.pink tr th.selectedDown{
background-color: #f99;
}
table.violet{
border: 1px solid #81218a;
}
table.violet tr th,
table.violet tr td{
border: 1px dotted #81218a;
}
table.violet tr th{
background-color: #81218a;
color: #fff;
}
table.violet tr td{
background-color: #f7f8f9;
}
table.violet tr.alt td{
background-color: #e8f1f7;
}
table.violet tr:hover td{
background-color: #c4cae2;
color: #333;
}
Tag Archive for table
Table Styles
mysql rename table
RENAME TABLE old_table TO backup_table, new_table TO old_table;
Accessible table
<table class="creditHistory"> <thead> <tr> <td> </td> <th id="method-1" axis="method" scope="col">In</th> <th id="method-2" axis="method" scope="col">Out</th> </tr> </thead> <tbody> <tr> <th id="date-1" axis="date" scope="row">19 September 2007</th> <td headers="date-1 method-1"><strong>10</strong> added</td> <td headers="date-1 method-2"> </td> </tr> <tr> <th id="date-2" axis="date" scope="row">9 September 2007</th> <td headers="date-2 method-1"> </td> <td headers="date-2 method-2"><strong>10</strong> used</td> </tr> <tr> <th id="date-3" axis="date" scope="row">18 August 2007</th> <td headers="date-3 method-1"><strong>50</strong> added</td> <td headers="date-3 method-2"> </td> </tr> <tr> <th id="date-4" axis="date" scope="row">8 August 2007</th> <td headers="date-4 method-1"> </td> <td headers="date-4 method-2"><strong>4</strong> to <a href="full-friends-hubbub.php">dicky</a></td> </tr> <tr> <th id="date-5" axis="date" scope="row">17 july 2007</th> <td headers="date-5 method-1"> </td> <td headers="date-5 method-2"><strong>4</strong> used</td> </tr> <tr> <th id="date-6" axis="date" scope="row">7 June 2007</th> <td headers="date-6 method-1"> </td> <td headers="date-6 method-2"><strong>1</strong> used</td> </tr> <tr> <th id="date-7" axis="date" scope="row">16 June 2007</th> <td headers="date-7 method-1"><strong>10</strong> from <a href="full-friends-hubbub.php">dicky</a></td> <td headers="date-7 method-2"> </td> </tr> </tbody> </table>
Category: Uncategorized |
Tags: accessibility, accessible, data, html, markup, posh, semantic, table, tabular, textmate
gmail-like column overflow.
.grid {table-layout: fixed;}
.grid * td {
empty-cells: show;
overflow: hidden;
width: 100%;
}
Alternating MYSQL table row colour
<?php
$host="localhost"; // Host name
$username=""; // Mysql username
$password=""; // Mysql password
$db_name="test"; // Database name
$tbl_name="test_mysql"; // Table name
// Connect to server and select databse
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
$sql="SELECT * FROM $tbl_name";
$result=mysql_query($sql);
// Define $color=1
$color="1";
echo '<table width="400" border="1" align="center" cellpadding="2" cellspacing="0">';
while($rows=mysql_fetch_array($result)){
// If $color==1 table row color = #FFC600
if($color==1){
echo "<tr bgcolor='#FFC600'>
<td>".$rows['id']."</td><td>".$rows['name']."</td><td>".$rows['email']."</td>
</tr>";
// Set $color==2, for switching to other color
$color="2";
}
// When $color not equal 1, use this table row color
else {
echo "<tr bgcolor='#C6FF00'>
<td>".$rows['id']."</td><td>".$rows['name']."</td><td>".$rows['email']."</td>
</tr>";
// Set $color back to 1
$color="1";
}
}
echo '</table>';
mysql_close();
?>
Drupal – Theme table with columstriping
/**
* Return a themed table.
*
* @param $header
* An array containing the table headers. Each element of the array can be
* either a localized string or an associative array with the following keys:
* - "data": The localized title of the table column.
* - "field": The database field represented in the table column (required if
* user is to be able to sort on this column).
* - "sort": A default sort order for this column ("asc" or "desc").
* - Any HTML attributes, such as "colspan", to apply to the column header cell.
* @param $rows
* An array of table rows. Every row is an array of cells, or an associative
* array with the following keys:
* - "data": an array of cells
* - Any HTML attributes, such as "class", to apply to the table row.
*
* Each cell can be either a string or an associative array with the following keys:
* - "data": The string to display in the table cell.
* - "header": Indicates this cell is a header.
* - Any HTML attributes, such as "colspan", to apply to the table cell.
*
* Here's an example for $rows:
* @verbatim
* $rows = array(
* // Simple row
* array(
* 'Cell 1', 'Cell 2', 'Cell 3'
* ),
* // Row with attributes on the row and some of its cells.
* array(
* 'data' => array('Cell 1', array('data' => 'Cell 2', 'colspan' => 2)), 'class' => 'funky'
* )
* );
* @endverbatim
*
* @param $attributes
* An array of HTML attributes to apply to the table tag.
* @param $caption
* A localized string to use for the <caption> tag.
* @return
* An HTML string representing the table.
*/
function MyTheme_table($header, $rows, $attributes = array(), $caption = NULL) {
$output = '<table'. drupal_attributes($attributes) .">
";
if (isset($caption)) {
$output .= '<caption>'. $caption ."</caption>
";
}
// Format the table header:
if (count($header)) {
$ts = tablesort_init($header);
$output .= ' <thead><tr>';
$i = 0;
foreach ($header as $cell) {
$zebra = $i % 2 ? 'even-col' : 'odd-col';
if (is_array($cell)) {
if (isset($cell['class'])) {
$cell['class'] .= " $zebra";
}
else {
$cell['class'] = $zebra;
}
}
else {
$cell = array('data' => $cell, 'class' => $zebra);
}
$cell = tablesort_header($cell, $header, $ts);
$output .= _theme_table_cell($cell, TRUE);
$i++;
}
$output .= " </tr></thead>
";
}
// Format the table rows:
$output .= "<tbody>
";
if (count($rows)) {
$flip = array('even' => 'odd', 'odd' => 'even');
$class = 'even';
foreach ($rows as $number => $row) {
$attributes = array();
// Check if we're dealing with a simple or complex row
if (isset($row['data'])) {
foreach ($row as $key => $value) {
if ($key == 'data') {
$cells = $value;
}
else {
$attributes[$key] = $value;
}
}
}
else {
$cells = $row;
}
// Add odd/even class
$class = $flip[$class];
if (isset($attributes['class'])) {
$attributes['class'] .= ' '. $class;
}
else {
$attributes['class'] = $class;
}
// Build row
$output .= ' <tr'. drupal_attributes($attributes) .'>';
$i = 0;
foreach ($cells as $cell) {
$zebra = $i % 2 ? 'even-col' : 'odd-col';
if (is_array($cell)) {
if (isset($cell['class'])) {
$cell['class'] .= " $zebra";
}
else {
$cell['class'] = $zebra;
}
}
else {
$cell = array('data' => $cell, 'class' => $zebra);
}
$cell = tablesort_cell($cell, $header, $ts, $i++);
$output .= _theme_table_cell($cell);
}
$output .= " </tr>
";
}
}
$output .= "</tbody></table>
";
return $output;
}
Category: Uncategorized |
Tags: colstriping, column, drupal, even, odd, table, td, theme, tr, zebra, zebrastriing
unwanted padding
table, td, tr, thead, tfoot, tbody, th, tf {
border-collapse: collapse;
margin: 0px;
padding: 0px;
}
provide default values for a hash
################
#COMPARE_N_SUBSTITUTE
#Compare a hash to a fall-through hash. If any values are present in the fall-through and not in the current values then insert them in the DYC hash.
#compare_n_substitute(hash1, hash2) #insert key-value-pairs from hash2 into hash1 only if those pairs are not defined in hash1.
#compare_n_substitute(%hash, %default)
sub compare_n_substitute(%%) {
my ($hashref, $fallthrough_hashref) = @_;
for my $key (keys %$fallthrough_hashref) {
unless (defined($$hashref{$key})) {
$$hashref{$key} = $$fallthrough_hashref{$key};
}
}
}
dump the contents of a data structure
#dump a hash
while (my ($key, $value) = each %target_list)
{
print "$key=>$value
";
}
#dump an array
for (@list){print "$_
";}