This is an assignment question.
The table above is what I need to make. The table below is what I came up with:
My code:
<!DOCTYPE html>
<html>
<head>
<title>Question Two</title>
<meta charset="UTF-8">
</head>
<body>
<h2>Nested Tables</h2>
<table border="1">
<tr>
<th>Header column 1</th>
<th>Header column 2</th>
<th>Header column 3</th>
<th>Header column 4</th>
</tr>
<tr>
<td>Row 2 - Item 1</td>
<td>Row 2 - Item 2</td>
<td rowspan="2">
<h4>Row 2: Nested Table 1</h4>
<table border="1">
<tr>
<th>Row 1 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 2 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 3 Header</th>
<td>item</td>
</tr>
</table>
</td>
<td>Row 2 - Item 4<br/>A second line</td>
</tr>
<tr>
<td>
<h4>Row 3: Nested Table 2</h4>
<table border=1>
<tr>
<th>Row 1 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 2 Header</th>
<td>item</td>
</tr>
</table>
</td>
<td>Row 3 - Item 2</td>
<td rowspan="2">Row 3 - Item 3</td>
</tr>
<tr>
<td>Row 4 - Item 1</td>
<td>Row 4 - Item 2</td>
<td>Row 4 - Item 3</td>
</tr>
<tr>
<td colspan="4">Row 5 - Last row of outer table</td>
</tr>
</table>
</body>
</html>
Two things are different: the font and line spacing of Nested Table 1 and 2.
As per the font, is there a way to set a default font for all HTML documents to use? If so, how?
For the spacing, I have no idea. I tried all kinds of combinations of <br>, <pre>, <div>.. etc. I'm pretty sure it's not a browser issue that caused the erroneous result (tried multiple browsers--I'm using IE, running on Windows 7). Any ideas?
Thank you.
This is just a wild guess but the font you're looking for may be "Calibri" or something very similar. You can add the font-family as an inline style to your body tag and everything in the table will inherit the font.
<body style="font-family:Calibri;"> and here's a demo of it in action.
The spacing seems fine as is, however if you need to make adjustments you can do so with padding, margin, or even cellpadding.
This will pad the space in all the cells by 10: <table border="1" cellpadding="10">
This will pad the top of the cell by 10px: <td rowspan="2" style="padding-top:10px;">
As per the font, is there a way to set a default font for all HTML documents to use? If so, how?
If it's something for "all HTML documents" to use, then it would be a browser setting. You're probably on your own for that one. But if you want something for all of the content in this document to use, that's easy with CSS. Something like this:
<style>
body {
font-family: Arial;
font-size: 1em;
color: #000;
}
</style>
Putting that in the head of the HTML would apply that styling to the entire contents of the body tag, including all descendants. (You can also put the CSS code in a separate file and use a <link> tag to reference it in the head. As the code grows in complexity, this quickly becomes a preferred approach.)
For the spacing, I have no idea. I tried all kinds of combinations of <br>, <pre>, <div>.. etc.
I'd use CSS for this as well. First, identify the element(s) you want to target. An id or a class is often a good approach. For example:
<td rowspan="2" id="column3Cell">
Then in the CSS you can target that element and apply styling to it:
#column3Cell {
padding-top: 10px;
}
Adjust as necessary. Since the goal here is to replicate a screen shot as exactly as possible, approximating it is going to take some tweaking and trial-and-error. But there is a lot you can do with CSS styles here.
<table border="1">
<thead>
<th>Header Column 1</th>
<th>Header Column 2</th>
<th>Header Column 3</th>
<th>Header Column 4</th>
</thead>
<tbody>
<tr>
<td rowspan="">Row 2 - Item 1</td>
<td>Row 2 -Item 2</td>
<td rowspan="2">Row 2 : Nested Table1
<br>
<br>
<table border="1">
<tr>
<th>Row 1 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 2 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 3 Header</th>
<td>item</td>
</tr>
</table>
</td>
<td>Row 2 : Item 4 <br> A second Line</td>
</tr>
<tr>
<td>
<br>
Row 3- Nested Table 2
<br>
<br>
<table border="1">
<tr>
<th>Row 1 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 2 Header</th>
<td>item</td>
</tr>
</table>
</td>
<td>Row 3 -item 2</td>
<td rowspan="2">Row 3 - Item 3</td>
</tr>
<tr>
<td>Row 4 - item 1 </td>
<td>Row 4 - item 2</td>
<td>Row 4 - item 3 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Row 5-Last row of outer table</td>
</tr>
</tfoot>
</table>
Related
This question already has answers here:
How can I style even and odd elements?
(9 answers)
Closed 4 years ago.
I have seen this image showing a very nice table:
I have html code that gives color to every even line. Every year column and subcolumns have a color too. Is there a way to have a new different mixed color for the cells in year coluns and even rows and a new different mixed color for the cells in year coluns and odd rows, just like in the picture?
I do not want to use something like:
.mixed_odd {background-color: #44ff99}
.mixed_even {background-color: #99ff99}
because my page will have many rows, more than 200 in some cases and it takes a lot of time to set the color to those columns manually. Is there a fast css way to do it like in the picture?
table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
.beta td {
text-align: center;
}
TH.Title {
background-color: #A0E0A0
}
tr:nth-child(even) {
background-color: #bbffcc;
}
.Year2016 {
background-color: #ffff99
}
.Year2017 {
background-color: #ccff99
}
.Year2018 {
background-color: #ffff99
}
<TABLE class="beta" cellspacing="2" cellpadding="6" border="1">
<TR>
<TH class="Title" rowspan="2">code</TH>
<TH class="Title" rowspan="2">Text</TH>
<TH class="Title" rowspan="2">Text</TH>
<TH class="Title" rowspan="2">Text</TH>
<TH class="Title" rowspan="2">Text</TH>
<th class="Year2016" colspan="2">2016 Items</th>
<th class="Year2017" colspan="2">2017 items</th>
<th class="Year2018" colspan="2">2018 Items</th>
</tr>
<TR>
<TH class="Year2016">Item 1</TH>
<TH class="Year2016">Item 2</TH>
<TH class="Year2017">Item 1</TH>
<TH class="Year2017">Item 2</TH>
<TH class="Year2018">Item 1</TH>
<TH class="Year2018">Item 2</TH>
</TR>
<TR>
<TD>1</TD>
<TD>text 1</TD>
<TD>text 2</TD>
<TD>text 3</TD>
<TD>text 4</TD>
<TD class="Year2016">5</TD>
<TD class="Year2016">6</TD>
<TD class="Year2017">7</TD>
<TD class="Year2017">8</TD>
<TD class="Year2018">9</TD>
<TD class="Year2018">10</TD>
</TR>
<TR>
<TD>1</TD>
<TD>text 1</TD>
<TD>text 2</TD>
<TD>text 3</TD>
<TD>text 4</TD>
<TD class="Year2016">5</TD>
<TD class="Year2016">6</TD>
<TD class="Year2017">7</TD>
<TD class="Year2017">8</TD>
<TD class="Year2018">9</TD>
<TD class="Year2018">10</TD>
</TR>
<TR>
<TD>1</TD>
<TD>text 1</TD>
<TD>text 2</TD>
<TD>text 3</TD>
<TD>text 4</TD>
<TD class="Year2016">5</TD>
<TD class="Year2016">6</TD>
<TD class="Year2017">7</TD>
<TD class="Year2017">8</TD>
<TD class="Year2018">9</TD>
<TD class="Year2018">10</TD>
</TR>
<TR>
<TD>1</TD>
<TD>text 1</TD>
<TD>text 2</TD>
<TD>text 3</TD>
<TD>text 4</TD>
<TD class="Year2016">5</TD>
<TD class="Year2016">6</TD>
<TD class="Year2017">7</TD>
<TD class="Year2017">8</TD>
<TD class="Year2018">9</TD>
<TD class="Year2018">10</TD>
</TR>
</TABLE>
The CSS already has rules for odd and even childs.
https://www.w3.org/Style/Examples/007/evenodd.en.html
You can set an ID for the table and work your style from that, so you won't have to style each element of the table manually. Suppose you have a <table id="beta">, you can write your CSS like:
#beta tr:nth-child(even) {color:limegreen;}
#beta tr:nth-child(odd) {color:lime;}
This will result in your even rows styled limegreen and your odd ones, lime. The same can be applied to <td>'s and whatever. This is another example but using lists, from a SO answer.
I think you can use <'col>, thank this you can color a whole column.
I give you a link for the syntax: https://html.com/tags/col/
I would like to add a responsive table with 2 columns using jquerymobile.
! column should be aligned to the left and the other to the right.
The result was that 2 columns were displayed 1 under the other, which is not what I want.
How can I display a 2 columns table using responsive table for mobile in a way that the left cell is displayed on the left and the right cell is displayed on the right, just as normal table should apper and not 1 cell below the other. (the wepapp is using jqm)
<div data-role="main" class="ui-content">
<table style="width:100%" data-role="table" class="ui-responsive">
<thead>
<tr>
<th data-priority="1" style="text-align:left"></th>
<th data-priority="1" style="text-align:right"></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">1</td>
<td style="text-align:right">Alfreds Futterkiste</td>
</tr>
</tbody>
</table>
Just remove the data-role=table:
Here is a DEMO
<table id="MyTable" class="ui-responsive table-stroke">
<thead>
<tr>
<th class="left">Col 1</th>
<th class="right">Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Row 1 Col 1</td>
<td class="right">Row 1 Col 2</td>
</tr>
<tr>
<td class="left">Row 2 Col 1</td>
<td class="right">Row 2 Col 2</td>
</tr>
<tr>
<td class="left">Row 3 Col 1</td>
<td class="right">Row 3 Col 2</td>
</tr>
<tr>
<td class="left">Row 4 Col 1</td>
<td class="right">Row 4 Col 2</td>
</tr>
</tbody>
</table>
#MyTable {
width: 100%;
}
#MyTable .left {
text-align: left;
}
#MyTable .right {
text-align: right;
}
I have this HTML Table with headings:
<table width="100%" align="center" rules="cols" frame="box" cellpadding="5" cellspacing="5">
<tr>
<td width="" align="center"><strong><img src="/includes/images/padlock_closed.png" width="14px" /></strong></td>
<td width="20px"><strong><input type="text" class="search" name="ticketnumber" placeholder="Ticket #" size="6" onkeyup="showUser(this.value)" /></strong></td>
<td width="50px"><strong>Contact</strong></td>
<td width="200px"><strong>Summary</strong></td>
<td width="40px"><strong>Category</strong></td>
<td width="30px"><strong>Open Date</strong></td>
<td width="30px"><strong>Last Modified</strong></td>
<td width="30px"><strong>Assigned To</strong></td>
</tr>
I am creating a live PHP/MySQL Search script and i need a div to show the results but i want to show them below these headings
I tried adding:
<div id="result">
'rest of HTML Table here...'
</div>
</table>
but it doesn't display the table correctly/in the correct format
how can i make it display correctly with a div in it?
You shouldn't be using a <div>, you should have a header row that uses <th> tags (instead of using <td>'s as you currently have and then data rows that use <td> tags inside of a <tr> for each row.
Update: Example with <tbody>:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tbody>
<tr>
<td>Row 1 column 1 data</td>
<td>Row 1 column 2 data</td>
</tr>
<tr>
<td>Row 2 column 1 data</td>
<td>Row 2 column 2 data</td>
</tr>
</tbody>
</table>
You can then write css for the <tbody> tag:
tbody { color: blue; }
I see there are a couple of posts about this around, including one on SO. However none of them answer the question, I am posting a newer one with an image that demonstrates the problem in 4 browsers.
FireFox renders the background image on the TR as I would like but as you can see none of the others do..
Does anybody have any ideas? At this point it looks like I need to go back to the drawing borad.
ps. adding backgound:none or background-image:none to TD doesn't fix this.
This is the code for my test case:
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
body
{
background-color:#aaa;
}
table
{
background-color:#fff;
}
tbody tr
{
height:80px;
background:#aaa url("Content/LM_DROPDOWN_BG_BUTT_01.png") no-repeat bottom ;
position:relative;
}
tbody tr td
{
background-image:none;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th style="width:200">Col1</th>
<th style="width:200">Col2</th>
<th style="width:200">Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</tbody>
</table>
</body>
</html>
Would nested table work for you?
see the 3rd row
Works cross-browser. Not cute (nested table!), but gets the job done.
Styling <tr>is hum, problematic, especially cross-browser. After all, a tr can only contains td. It's not made to support other stuff (try <table><tr><td>1</td></tr><div>2</div></table> for fun).
Also, give Opera some love.
edit:however, you'll have to either have the same (fixed) width for the nested <td> (or the content), otherwise, the width of the <td> will be broken (not the same).
Hi all it's been a while since I've asked something, this is something that has been bothering me for a while, the question itself is in the title:
What's your preferred way of writing HTML tables that have vertical headers?
By vertical header I mean that the table has the header (<th>) tag on the left side (generally)
Header 1 data data data
Header 2 data data data
Header 3 data data data
They look like this, so far I've come up with two options
First Option
<table id="vertical-1">
<caption>First Way</caption>
<tr>
<th>Header 1</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
</table>
The main advantage of this way is that you have the headers right (actually left) next to the data it represents, what I don't like however is that the <thead>, <tbody> and <tfoot> tags are missing, and there's no way to include them without breaking the nicelly placed together elements, which lead me to the second option.
Second Option
<style type="text/css">
#vertical-2 thead,#vertical-2 tbody{
display:inline-block;
}
</style>
<table id="vertical-2">
<caption>Second Way</caption>
<thead>
<tr>
<th colspan="3">Header 1</th>
</tr>
<tr>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th colspan="3">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Footer</td>
</tr>
</tfoot>
</table>
The main advantage here is that you have a fully descriptive html table, the drawbacks are that proper representation needs a bit of CSS for the tbody and thead tags and that the relation between the headers and data isn't very clear as I had my doubts when creating the markup.
So, both ways render the table how it should, here a pitcure:
With the headers on the left or right side if you would prefer it, so, any suggestions, alternatives, browser issues?
First, your second option isn't quite valid HTML in the sense that all of the rows (TR) in a table should contain an equal number of columns (TD). Your header has 1 while the body has 3. You should use the colspan attribute to fix that.
Reference: "The THEAD, TFOOT, and TBODY sections must contain the same number of columns." - Last paragraph of section 11.2.3.
With that being said, the first option is the better approach in my opinion because it's readable regardless of whether or not I have CSS enabled. Some browsers (or search engine crawlers) don't do CSS and as such, it'll make your data make no sense as the header will then represent columns instead of rows.
The First Option... I think it is the better and simple approach..
Honestly, option 1. I would suggest you to look at this example from W3.org(link below). I think this method is the best, because this way your headings will also be interpreted right on screen readers.
https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only
If you want to show a data-bound control element (like asp repeater) in your table, then first option won't be possible. Second option can be used as follows.
<asp:Repeater ID="hours" runat="server">
<HeaderTemplate>
<table id="vertical-table">
<thead>
<tr>
<th colspan="0">hours:</th>
</tr>
<tr>
<th colspan="1">Monday</th>
</tr>
<tr>
<th colspan="1">Tuesday</th>
</tr>
<tr>
<th colspan="1">Wednesday</th>
</tr>
<tr>
<th colspan="1">Thursday</th>
</tr>
<tr>
<th colspan="1">Friday</th>
</tr>
<tr>
<th colspan="1">Saturday</th>
</tr>
<tr>
<th colspan="1">Sunday</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Container.DataItem %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
div.vertical {
margin-left: -85px;
position: absolute;
width: 215px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
/* Safari/Chrome */
-moz-transform: rotate(-90deg);
/* Firefox */
-o-transform: rotate(-90deg);
/* Opera */
-ms-transform: rotate(-90deg);
/* IE 9 */
}
th.vertical {
height: 220px;
line-height: 14px;
padding-bottom: 20px;
text-align: left;
}
<table>
<thead>
<tr>
<th class="vertical">
<div class="vertical">Really long and complex title 1</div>
</th>
<th class="vertical">
<div class="vertical">Really long and complex title 2</div>
</th>
<th class="vertical">
<div class="vertical">Really long and complex title 3</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example</td>
<td>a, b, c</td>
<td>1, 2, 3</td>
</tr>
</tbody>
</table>