I am creating one html table but i am confused with
Can any one help me to create table like attached image with color combinations.
Thank You.
Try this code. You can change the color according to your choice
<table border="1" width="50%">
<tr style="background-color: #090">
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
<tr style="background-color: #7aba7b">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr style="background-color: #99BC99">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
Some basic HTML stuff for tables:
<table> </table> = table tag
<tr> </tr> = row tag
<td> </td> = cell tag
So you put it all together like so:
<table>
<tr>
<td> cell content </td>
</tr>
</table>
Repeat rows and cells as needed. Then add some styling with some CSS or something. Now go try it!
Related
What is the term of this table arrangement?
and I want to make a like that using bootstrap, but I fail so many times.
(also I already google it)
that is why I am here to look someone know how to do it.
I assume you are specifically referring to the use of colspan to cover multiple columns with one cell and rowspan to cover multiple rows with one cell
<table>
<tr><td rowspan="2">FOO</td><td colspan="4">EXAMPLE</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1. Something here</td><td></td><td></td><td></td><td></td></tr>
<tr><td>2. Something here</td><td></td><td></td><td></td><td></td></tr>
<tr><td>3. Something here</td><td></td><td></td><td></td><td></td></tr>
<tr><td>4. Something here</td><td></td><td></td><td></td><td></td></tr>
</table>
Try like this:
Demo
HTML:
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2">Heading</th>
<th rowspan="2">Heading</th>
<th colspan="4">Heading</th>
</tr>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>SHeading</th>
</tr>
</thead>
<tbody>
<tr>
<td>3546 </td>
<td>89789</td>
<td>3546</td>
<td>789789</td>
<td>56456757</td>
<td>56456757</td>
</tr>
<tr>
<td>3546 </td>
<td>89789</td>
<td>3546</td>
<td>789789</td>
<td>56456757</td>
<td>56456757</td>
</tr>
<tr>
<td>3546 </td>
<td>89789</td>
<td>3546</td>
<td>789789</td>
<td>56456757</td>
<td>56456757</td>
</tr>
<tr>
<td>3546 </td>
<td>89789</td>
<td>3546</td>
<td>789789</td>
<td>56456757</td>
<td>56456757</td>
</tr>
</tbody>
I'm having a werid problem making a super simple table without any css mods.
The code is the following:
<table>
<tr>
<th>ID</th>
<th>Country</th>
<th>Count</th>
</tr>
<tr>
<td>2<td>
<td>ARGENTINA<td>
<td>7379<td>
</tr>
<tr>
<td>3<td>
<td>CHILE<td>
<td>6543<td>
</tr>
<tr>
<td>4<td>
<td>EGYPT<td>
<td>6512<td>
</tr>
</table>
I'm getting crasy in trying to find what's wrong in this super simple code about why is it that the table header's columns refuse to align with its respective values?
It seems that there's an extra ghost column being created.
Can anyone explain, please?
Your lines are missing the closing . You have where the closing tags should be.
<table>
<tr>
<th>ID</th>
<th>Country</th>
<th>Count</th>
</tr>
<tr>
<td>2</td>
<td>ARGENTINA</td>
<td>7379</td>
</tr>
<tr>
<td>3</td>
<td>CHILE</td>
<td>6543</td>
</tr>
<tr>
<td>4</td>
<td>EGYPT</td>
<td>6512</td>
</tr>
</table>
Your doesn't have a closing tag.
Try this:
<table>
<tr>
<th>ID</th>
<th>Country</th>
<th>Count</th>
</tr>
<tr>
<td>2</td>
<td>ARGENTINA</td>
<td>7379</td>
</tr>
<tr>
<td>3</td>
<td>CHILE</td>
<td>6543</td>
</tr>
<tr>
<td>4</td>
<td>EGYPT</td>
<td>6512</td>
</tr>
</table>
Then it looks like it tries to create closing tags for each... And as a result you are ending up with weird extra columns.
I'm trying to help my son with a HTML project. This is to be only HTML, not CSS. He has to build a table with his school class schedule. I can't seem to get the columns to line up.
<!DOCTYPE html>
<html>
<body>
<center> Howie </center>
<p><table border="0"
cellpadding=0>
</tr>
<tr>
<th>Period</th>
<th>Class</th>
<th>Teacher</th>
</tr>
<tr>
<td>1</td>
<td>Band </td>
<td>Sletten</td>
</tr>
<tr>
<td>2</td>
<td> Intro to IT</td>
<td>Rogers</td> </tr>
</tr>
<tr>
<td>3</td>
<td>Biology</td>
<td>Braet</td>
</tr>
<tr>
<td>4</td>
<td>Study Hall</td>
<td>Mendoza</td>
</tr>
<tr>
<td>5</td>
<td>English II</td>
<td>Johnson</td>
</tr>
<tr>
<td>6</td>
<td>US History</td>
<td>Peterson</td>
</tr>
<tr>
<td>7</td>
<td>Advanced Algebra </td>
<td>Connon</td>
</tr>
<tr>
<td>8</td>
<td>Spanish II </td>
<td>Michel</td>
</table></p>
Any suggestions? Any help would be appreciated.
Thanks,
Al
Im sorry... But please look at the code first.
You are beginning with a </tr> That means you want to close a <tr>
And at the end you dont close the <tr>
Second point, why a table inside of a <p> ?
I think if you fix those minor faults.. it will be fine.
Succes with helping your son
Your HTML is malformed. Among other issues:
There is a stray closing </tr> tag just inside <table> tag which needs to be removed.
After the <td></td> containing "Rogers" is an extra </tr> which needs to be removed.
You are missing a </tr> at the end of the table before the </table> tag.
Your HTML is missing the closing </body> and </html> tags.
You should use an HTML validator, such as this one. This will help you discover these types of issues in the future.
They seem messed up because default h alignment for <th> is center and for <td> is left. If you switch th with td you should be fine.
I also agree with the other answers that you have some html issues. I recommend you write html using a specialized editor.
your open and close tags were somewhat messy.
plus I added some html alignment for the head row.
Next time use a text highlighting editor, it makes life a whole lot easier to find the issues:
jsFiddle Example
<p><table border="0" cellpadding="6" cellspacing="0">
<tr>
<th align="left">Period</th>
<th align="left">Class</th>
<th align="left">Teacher</th>
</tr>
<tr>
<td>1</td>
<td>Band </td>
<td>Sletten</td>
</tr>
<tr>
<td>2</td>
<td> Intro to IT</td>
<td>Rogers</td>
</tr>
<tr>
<td>3</td>
<td>Biology</td>
<td>Braet</td>
</tr>
<tr>
<td>4</td>
<td>Study Hall</td>
<td>Mendoza</td>
</tr>
<tr>
<td>5</td>
<td>English II</td>
<td>Johnson</td>
</tr>
<tr>
<td>6</td>
<td>US History</td>
<td>Peterson</td>
</tr>
<tr>
<td>7</td>
<td>Advanced Algebra </td>
<td>Connon</td>
</tr>
<tr>
<td>8</td>
<td>Spanish II </td>
<td>Michel</td>
</tr>
</table></p>
I currently have a code that looks something like this:
<table border="1">
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I want to alter it so the format looks something like this:
However, it seems like whatever I try, just does not work out. How can I alter my code to make my table look like the one in the image? The CSS, sizes, and shapes don't matter, I'm just struggling to get the correct template.
Try using rowspan:
<table border="1">
<tbody>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
What you're missing is a rowspan tag. Insert the following just after the tbody tag:
<tr>
<td rowspan="2"></td>
</tr>
Is it possible to lay out a table with 2 columns. The first column with many td's, the second one with only one?
Yes, use colspan...or you might want rowspan (colspan's opposite :))
Directly from the article (with enclosing the attributes in quotes:
<TABLE BORDER="2" CELLPADDING="4">
<TR> <TH COLSPAN="2">Production</TH> </TR>
<TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR>
<TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR>
<TR> <TH COLSPAN="2">Sales</TH> </TR>
<TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR>
<TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR>
<TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR>
</TABLE>
Here is the W3 article
yes use rowspan or colspan to merge td. Example:
<table>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td rowspan="3"></td>
</tr>
</table>