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;
}
Related
this is what table i need
I can easily get first and second row good but when i'm trying to make row third, I'm destroying row two.
I tried with width attribute and colspan but nothing work.
<table border="1px" width="100%">
<tr>
<td colspan="6">Cell 1</td>
</tr>
<tr >
<td colspan="3">Cell 2</td>
<td colspan="3" >Cell 3</td>
</tr>
<tr>
<td colspan="2">Cell 4</td>
<td colspan="2">Cell 5</td>
<td colspan="2">Cell 6</td>
</tr>
</table>
A <table> will conform to it's content by default so there's no need for each column to be equal in width. So manually assign equal column widths by assigning table-layout: fixed to <table> then an equal width for each column by either assigning each width to the <th> in the <thead> of the first <tr> or lacking that assign widths to the <td> of the first <tr> (of course td or th as a selector works as well), see example below.
table {
table-layout: fixed;
}
td {
width: 16.5%;
text-align: center;
}
<table border="1px" width="100%">
<tr>
<td colspan="6">I</td>
</tr>
<tr>
<td colspan="3">II</td>
<td colspan="3">III</td>
</tr>
<tr>
<td colspan="2">IV</td>
<td colspan="2">V</td>
<td colspan="2">VI</td>
</tr>
</table>
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 want to create a table like shown in the image using HTML. How to do?
User colspan="3" attribute if you need marge two cells into one .
w3schools
th, td {
background: #ddd;
padding: 2px;
}
<table>
<tr>
<th> </th>
<th>9AM</th>
<th>10AM</th>
<th>11AM</th>
<th>12AM</th>
</tr>
<tr>
<td>Mon day</td>
<td colspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>tuesDay</td>
<td scope="col" colspan="3"> </td>
<!-- The following two cells will appear under the same header -->
<td>Col 1</td>
</tr>
</table>
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>
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; }