I want to create a gumby grid, but I need something similar with table using rowspan. Is it possible?
<table>
<tr>
<td rowspan="2" colspan="2" >
two rows two columns
</td>
<td>something</td>
<td>something</td>
<td>something</td>
</tr>
<tr>
<td>something</td>
<td>something</td>
<td>something</td>
</tr>
<tr>
<td rowspan="2" colspan="3" >
two rows three columns
</td>
<td>something</td>
<td>something</td>
</tr>
<tr>
<td>something</td>
<td>something</td>
</tr>
Thanks!
Can be fixed with nested tables
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="200" align="center" cellpadding="0" cellspacing="0" bgcolor="ff0000">
<tr>
<td>
two rows two columns
</td>
</tr>
</table>
</td>
<td>
<table width="300" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>something</td>
<td>something</td>
<td>something</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="300" align="center" cellpadding="0" cellspacing="0" bgcolor="ff0000">
<tr>
<td>
two rows three columns
</td>
</tr>
</table>
</td>
<td>
<table width="200" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>something</td>
<td>something</td>
</tr>
<tr>
<td>something</td>
<td>something</td>
</tr>
</table>
</td>
</tr>
</table>
Related
trying to change the style of a number inside a cell without also changing the style of the cell itself.
i'm learning web developing and someone suggested creating a game would be a good idea. I'm trying to create a Sudoku game, with the regular style and set up. it's looking the way i want it to except for i can't change the color of the numbers inside the cells without also changing the color of the cell itself. I have the styling in a separate css file and tried making changes to it and also adding to the html file but i can't get it to work. Any suggestions will be appreciated.
here's the html
<html>
<head>
<link rel="stylesheet" href="assignment 1.css">
<title>sudoku</title>
</head>
<table>
<colgroup><col><col><col>
<colgroup><col><col><col>
<colgroup><col><col><col>
<tbody>
<tr> <td>1 <td> <td>3 <td>6 <td> <td>4 <td>7 <td> <td>9
<tr> <td> <td>2 <td> <td> <td>9 <td> <td> <td>1 <td>
<tr> <td>7 <td> <td> <td> <td> <td> <td> <td> <td>6
<tbody>
<tr> <td>2 <td> <td>4 <td> <td>3 <td> <td>9 <td> <td>8
<tr> <td> <td> <td> <td> <td> <td> <td> <td> <td>
<tr> <td>5 <td> <td> <td>9 <td> <td>7 <td> <td> <td>1
<tbody>
<tr> <td>6 <td> <td> <td> <td>5 <td> <td> <td> <td>2
<tr> <td> <td> <td> <td> <td>7 <td> <td> <td> <td>
<tr> <td>9 <td> <td> <td>8 <td> <td>2 <td> <td> <td>5
and the css
table { border-collapse: collapse; font-family: Palatino linotype, sans-
serif; }
colgroup, tbody { border: solid medium;}
td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center;
padding: 0; }
https://en.wikipedia.org/wiki/Sudoku#/media/File:Sudoku_Puzzle_by_L2G-20050714_solution_standardized_layout.svg
i want the look to be similar to this, where the constant numbers are a different color.
You need to close the tbody, tr and td tags. To learn more about tables : https://www.w3schools.com/html/html_tables.asp
I have tried two options.
Red color text covered with th instead of td
Blue color td has a class and styled according to it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table {
font-size: 50px;
background: #000;
}
table table {
background: #fff;
}
table table td, table table th {
border: 1px solid #000;
}
table table th {
color: red;
}
table table td.blue{color:blue;}
</style>
</head>
<body>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="5">
<tr>
<td width="200"><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle" class="blue">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle" class="blue">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td width="200"><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td width="200"><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle" class="blue">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle" class="blue">2</td>
<td align="center" valign="middle" class="blue">3</td>
</tr>
<tr>
<td align="center" valign="middle" class="blue">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle" class="blue">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
It should be like
It should be 4 rows and 3 colums. In first column centrall cell takes 2 cells. In second it should be 1 row. And third the same as first
I have this code
<table border="1" width="100%">
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="4">2</td>
<td>3</td>
</tr>
<tr>
<td rowspawn="2">4</td>
<td rowspawn="2">5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
But it looks like this
I am not 100% sure what you are after however, does this give you what you want?
<table border="1" width="100%">
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="4">2</td>
<td>3</td>
</tr>
<tr>
<td style="height:200px;" rowspawn="2">4</td>
<td rowspawn="2">5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
<table height="200px" width="900px" border="1px solid black">
<tr>
<td></td>
<td rowspan="4"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Try this code. It Works.
I have data where each row has an ID. For some rows, the IDs match others. This means that they are part of the same "group". They may have values in different columns, but they don't over lap. I'm trying to squash the rows with the same IDs, but can't figure it out, (so in the example below, the result would just have 3 rows, for IDs 1 2 and 3)
Example (run the snippet):
I've tried using aggregate, but I can't find a concat function for Strings. Thanks.
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
<tr>
<th class="tg-yw4l">ID</th>
<th class="tg-yw4l">Name</th>
<th class="tg-yw4l">Info</th>
<th class="tg-yw4l">A</th>
<th class="tg-yw4l">B</th>
</tr>
<tr>
<td class="tg-yw4l">1</td>
<td class="tg-yw4l">Jack</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">1</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">ABC</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">x</td>
</tr>
<tr>
<td class="tg-yw4l">1</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">x</td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">2</td>
<td class="tg-yw4l">Marin</td>
<td class="tg-yw4l">ABC</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">2</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">Y</td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">3</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">X</td>
</tr>
<tr>
<td class="tg-yw4l">3</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">ABC</td>
<td class="tg-yw4l">X</td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">3</td>
<td class="tg-yw4l">Giraffe</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">Y</td>
</tr>
</table>
I have a table and I need to format the currency in order for the . to be displayed always under each other.
This is the table:
<table class="data" cellspacing="0" cellpadding="5" border="0">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Field1</th>
<th>Field2</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr class="verticalDivider"></tr>
<tr>
<td>08 April 2010</td>
<td>value 1</td>
<td>GBP 20.00</td>
<td> </td>
<td>GBP 20.00</td>
</tr>
<tr>
<td>08 May 2010</td>
<td>value 2</td>
<td>GBP 100.00</td>
<td> </td>
<td>GBP 1020.00</td>
</tr>
<tr>
<td>19 May 2010</td>
<td>value 3</td>
<td> </td>
<td>GBP 50.00</td>
<td>GBP 970.00</td>
</tr>
</tbody>
</table>
How can I achieve this?
How does this look?
<style type="text/css">
.price {
text-align: right;
}
</style>
<table class="data" cellspacing="0" cellpadding="5" border="0">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Field1</th>
<th>Field2</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr class="verticalDivider"></tr>
<tr>
<td>08 April 2010</td>
<td>value 1</td>
<td class="price">GBP 20.00</td>
<td> </td>
<td class="price">GBP 20.00</td>
</tr>
<tr>
<td>08 May 2010</td>
<td>value 2</td>
<td class="price">GBP 100.00</td>
<td> </td>
<td class="price">GBP 1020.00</td>
</tr>
<tr>
<td>19 May 2010</td>
<td>value 3</td>
<td> </td>
<td class="price">GBP 50.00</td>
<td class="price">GBP 970.00</td>
</tr>
</tbody>
</table>
assuming you'll always print 2 decimal digits, I would define all my table <col /> then I'd assign text-align : right to that cols that contain prices (and padding-right to create space from border)
otherwise as specified in http://www.w3.org/TR/html401/struct/tables.html#h-11.3.2 you could assign align="char" char="." to table cols (if you browser support it)
To have the currency symbol (GBP) AND the dots aligned you can do the following (tested on Chrome and Firefox, breaks on IE):
CSS file:
...
td.money {
text-align: right;
}
.currencySymbol {
float: left;
}
...
And your table cell would look like:
<td class="money">
<div class="currencySymbol">GBP</div>
970.00
</td>
Although it's dangerous (probably the reason why it breaks on IE), see: Is a DIV inside a TD a bad idea?
<td align="right">GBP 20.00</td>
<td align="right">GBP 100.00</td>
<td align="right"> </td>
I Guess thats what you are looking for as long as thee is ".00". If I were you, I would start using css even for this bit of code where you need to edit 3 places instead of one.
Most of the time it makes sense to organize table data in rows. However right now I'm dealing with a table that compares data across several columns. Each column is a product, so I'd like to keep all product data grouped together.
<tr>
<td>Name</td>
<td>Price</td>
<td>Weight</td>
<td>Height</td>
<td>Compatibility</td>
<td>Designer</td>
<td>Manufacturer</td>
<td>Age Requirement</td>
</tr>
Using the TR tag that row will run horizontally, is there a way to make it run vertically?
Update:
I would like the table to display like regular html in this example:
<tr>
<td>Name</td>
<td>Name2</td>
</tr>
<tr>
<td>Price</td>
<td>Price2</td>
</tr>
<tr>
<td>Weight</td>
<td>Weight2</td>
</tr>
<tr>
<td>Height</td>
<td>Height2</td>
</tr>
However I would like to be able to code it by related content:
<tr>
<td>Name</td>
<td>Price</td>
<td>Weight</td>
<td>Height</td>
</tr>
<tr>
<td>Name</td>
<td>Price</td>
<td>Weight</td>
<td>Height</td>
</tr>
In other words, I want the table row tag (tr) to act like a column.
<tr>
<td>Name</td>
</tr>
<tr>
<td>Price</td>
</tr>
<tr>
<td>Weight</td>
</tr>
<tr>
<td>Height</td>
</tr>
<tr>
<td>Compatibility</td>
</tr>
<tr>
<td>Designer</td>
</tr>
<tr>
<td>Manufacturer</td>
</tr>
<tr>
<td>Age Requirement</td>
</tr>
If you want another product beside it, you would do:
<tr>
<td>Name</td>
<td>Name2</td>
</tr>
<tr>
<td>Price</td>
<td>Price2</td>
</tr>
<tr>
<td>Weight</td>
<td>Weight2</td>
</tr>
<tr>
<td>Height</td>
<td>Height2</td>
</tr>
<tr>
<td>Compatibility</td>
<td>Compatibility2</td>
</tr>
<tr>
<td>Designer</td>
<td>Designer2</td>
</tr>
<tr>
<td>Manufacturer</td>
<td>Manufacturer2</td>
</tr>
<tr>
<td>Age Requirement</td>
<td>Age Requirement2</td>
</tr>
This solution may not work on older browsers, but something along the lines of this approach generally works for me:
<style>
.col {
display: table-cell;
}
</style>
<body>
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</body>