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; }
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 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 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'm trying to solve a specific problem with CSS selectors. I have the foillowing HTML:
<table class="Layout">
<tr>
<td>
<table class="Region">
<tbody>
<tr>
<th align="left">Header 1</th>
</tr>
<tr>
<td>
<table class="SelectionTable">
<tbody>
<tr>
<td>Text 1</td><td>Text 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top"></td>
<td valign="top">
<table class="Region">
<tr>
<th align="left" colspan="2">Header 2</th>
</tr>
<tr>
<td>Text 1</td><td>Text 2</td>
</tr>
</table>
</td>
</tr>
</table>
What I need to do is select the first occurence of the class "Region" within the document, and then select the th element, which contains the text "Header 1" (there will only be 1 th element within these tables). My reason for this is so i can apply a background color to this element.
I currently have this css which applies background color to the th elements of the two "Region" tables:
TABLE.Region TH {background-color: #00A5DB;}
But I want to apply background-color: #BAD80A to only the first occurence of "Region"
I know I can achieve this using javascript and I know this is an old way of arranging elements on a page, but this is a change to a company intranet with many pages, so changing just the style sheet would be by far the quickest way of acheiving this, as I don't really have the time to make sweeping changes at the moment! We use IE11 as our main browser, so the answer can be quite specific if necessary.
Any help would be appreciated!
Thanks
You can use the first-child psuedo-selector on the td and then target the th inside .region.
Here's a demo:
td:first-child .Region th {
background-color: red;
}
<table class="Layout">
<tr>
<td>
<table class="Region">
<tbody>
<tr>
<th align="left">Header 1</th>
</tr>
<tr>
<td>
<table class="SelectionTable">
<tbody>
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top"></td>
<td valign="top">
<table class="Region">
<tr>
<th align="left" colspan="2">Header 2</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
</table>
</td>
</tr>
</table>
/*Both work fine*/
table.Layout td:first-child th{
background: #555;
}
td:first-child th{
background: #555;
}
JSFiddle - http://jsfiddle.net/uL9uLLuf/
I'm using bootstrap (link) on my site, but i'm a little bit confused about the using of tables. Before bootraps all my table TD cells had dynamic widths, so the TD had a bigger width if the content was a long sentence and smaller if it was only a 11 character long text input. But right now all my TD elements has the same width and I can't find the way, how to change this...
This is my table:
<table id="table1" style="padding-top:10px;">
<tr>
<td colspan="6" style="text-align:center;">TITLE</td>
</tr>
<tr>
<td colspan="3" style="text-align:center;">SUBTITLE 1</td>
<td colspan="3" style="text-align:center;">SUBTITLE 2</td>
</tr>
<tr>
<td style="text-align:left;"><b>A.</b></td>
<td>Data title 1</td>
<td><input type="text" maxlength="11" size="11" name="input_a"></td>
<td style="text-align:left;"><b>D.</b></td>
<td>Data title 2</td>
<td><input type="text" maxlength="11" size="11" name="input_b"></td>
</tr>
...
</table>
So I want to have the "Data title X" cell have bigger width as the cell which has the input text field smaller. If I give them manually the style="width:xyzpx;" attribute it didn't change anything.
Can it be done somehow?
try to use the the span1, span2... span12 classes on table elements (or whereever needed, e.g. inputs):
<table id="table1">
<thead>
<tr>
<th colspan="6">TITLE</th>
</tr>
<tr>
<th colspan="3">SUBTITLE 1</th>
<th colspan="3">SUBTITLE 2</th>
</tr>
</thead>
<tr>
<td class='span1'><b>A.</b>
</td>
<td class='span4'>Data title 1</td>
<td class='span1'>
<input type="text" maxlength="11" size="11" name="input_a" class="span1" />
</td>
<td class='span1'><b>D.</b>
</td>
<td class='span4'>Data title 2</td>
<td class='span1'>
<input type="text" maxlength="11" size="11" name="input_b" class="span1" />
</td>
</tr>
</table>
here is the jsFiddle
ps: there is col- (col-4, col-lg-4...) class prefix in bootstrap3
Using <td width="10%"> works for me on Twitter bootstrap. Or you could add a class to the td and set the width in your stylesheet td.column{ width: 10% !important;}
Also you might want to make your tables like below for a more valid markup:
<table>
<thead>
<tr>
<td>Title 1</td>
...
</tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
</tbody>
</table>
Add the width properties to the <tr> with all 6 <td> elements.