Here's a link to the question
and here's my answer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spreadsheet</title>
<style>
td {
text-align: right;
width: 33%;
}
td, th, table {
border: 1px solid;
border-collapse: collapse;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<caption>Purchase Orders</caption>
</thead>
<tbody>
<tr>
<th>Order Date</th>
<th>SKU</th>
<th>Quantity</th>
</tr>
<tr>
<td>07-16-2018</td>
<td>523402</td>
<td>54</td>
</tr>
</tbody>
</table>
</body>
</html>
It comes out fine on my IDE but on the website is saying 3 of 4 test cases fail.
The site seems to be a little more strict here than to just check if it looks the same. To make the tests pass you need to:
Put the row containing the <th> tags between <thead></thead>.
Move the caption out of <thead>.
The correct code for the table would then look like this:
<table>
<caption>Purchase Orders</caption>
<thead>
<tr>
<th>Order Date</th>
<th>SKU</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>07-16-2018</td>
<td>523402</td>
<td>54</td>
</tr>
</tbody>
</table>
Related
How to position a table on the right side of the screen? The desired output looks like this:
table on the right
How do we pull it off? Thanks!
The code I used is:
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
sometimes reading documentation may be useful
table,
th,
td {
border: 1px solid black;
}
table {
float: right;
}
<table>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
You can make the table right side by using following code:
table{
width: auto;
float: right;
}
table {
width: auto;
float: right;
}
<html>
<body>
<table>
<tr>
<td>
Item 1
</td>
<td>
Item 2
</td>
</tr>
</table>
</body>
</html>
The needed code to pull it off is:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
table, th, td {
border: 1px solid black;
}
table {float: right;}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Ouch</th>
</tr>
<tr>
<th colspan="2"><img src=AAAAAHjpg" alt="Posporo" width="300" height="300"></th>
</tr>
<tr>
<th colspan="2">Professional</th>
</tr>
<tr>
<th>Affiliation</th>
<td>Mafia</td>
</tr>
<tr>
<th>Profession</th>
<td>Eater</td>
</tr>
<tr>
<th>Partner</th>
<td>You</td>
</tr>
<tr>
<th>Base</th>
<td>Somewhere</td>
</tr>
<tr>
<th colspan="2">Personal</th>
</tr>
<tr>
<th>Education</th>
<td>Pamantasan ng Unibersidad ng Paaralan</td>
</tr>
<tr>
<th colspan="2">Signature</th>
</tr>
<tr>
<th colspan="2">gd jasdagjadgjd</th>
</tr>
</table>
</body>
</html>
I am working with a table that has some columns containing numeric values. I want the heading as well as the data of the column (<th> and <td>) to be aligned right.
I don't know how to select only the columns containing numeric values in <td>.
console.log("hi");
table {
table-layout: fixed;
border-collapse: collapse;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
tbody, thead, tfooter {
text-align: left;
}
tfoot {
border-top: 1px solid gray;
}
tbody tr:nth-child(odd) {
background-color: rgb(222, 227, 224);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello!</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<table>
<caption>
A summary of the UK's most famous punk bands
</caption>
<thead>
<tr>
<th scope="col">Band</th>
<th scope="col">Year formed</th>
<th scope="col">No. of Albums</th>
<th scope="col">Most famous song</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Buzzcocks</th>
<td>1976</td>
<td>9</td>
<td>Ever fallen in love (with someone you shouldn't've)</td>
</tr>
<tr>
<th scope="row">The Clash</th>
<td>1976</td>
<td>6</td>
<td>London Calling</td>
</tr>
<tr>
<th scope="row">The Damned</th>
<td>1976</td>
<td>10</td>
<td>Smash it up</td>
</tr>
<tr>
<th scope="row">Sex Pistols</th>
<td>1975</td>
<td>1</td>
<td>Anarchy in the UK</td>
</tr>
<tr>
<th scope="row">Sham 69</th>
<td>1976</td>
<td>13</td>
<td>If the kids are united</td>
</tr>
<tr>
<th scope="row">Siouxsie and the Banshees</th>
<td>1976</td>
<td>11</td>
<td>Hong Kong Garden</td>
</tr>
<tr>
<th scope="row">Stiff Little Fingers</th>
<td>1977</td>
<td>10</td>
<td>Suspect Device</td>
</tr>
<tr>
<th scope="row">The Stranglers</th>
<td>1974</td>
<td>17</td>
<td>No More Heroes</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">Total albums</th>
<td colspan="2">77</td>
</tr>
</tfoot>
</table>
</body>
</html>
In your HTML it appears only the 2nd and 3rd columns are the ones that are numeric.
You can use CSS' nth child selector and target the 2nd and 3rd cols in each row.
table tbody tr td:nth-child(2) {
text-align: right;
}
table tbody tr td:nth-child(3) {
text-align: right;
}
You can use the same method for any column in your table footer. But if your table can be more complex then the best option is to use JavaScript to loop over the <td> and check if its content is numbers only and then add a class or inline style to it.
Reference: https://developer.mozilla.org/en/docs/Web/CSS/:nth-child
I'm trying to add 3 columns under 'Top 10' table header but when I add values for cells everything gets corrupt
also there's an empty cell just before the 'ID' cell, I don't know where it came from
<html>
<head>
<title>ss</title>
<style>
table { width: 100%; border-collapse: collapse; }
td { border: 1px solid #000; }
</style>
</head>
<body>
<center>
<table border="1">
<thead>
<tr>
<th align="center">
<font face="Arial, Helvetica, sans-serif"></font>
</th>
<th align="center">
<font face="Arial, Helvetica, sans-serif">Site</font>
</th>
<th colspan="4" align="center">
<font face="Arial, Helvetica, sans-serif">Top 10</font>
</th>
</tr>
</thead>
<!-- Table Content -->
<tbody>
<tr>
<td align="center">
<font face="Arial, Helvetica, sans-serif">1</font>
</td>
<td align="center">
<font face="Arial, Helvetica, sans-serif">example</font>
</td>
<td>
<td>ID</td>
<td >Name</td>
<td>From</td>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
your help is appreciated
The HTML of your table is completely off. Make sure you use the right elements and close everything too. And try to apply styling with CSS as much as possible.
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
}
<table>
<thead>
<tr>
<th></th>
<th>Site</th>
<th colspan="3">Top 10</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">Example</td>
<td>ID</td>
<td>Name</td>
<td>From</td>
</tr>
<tr>
<td>1</td>
<td>Kobo</td>
<td>Jack</td>
</tr>
</tbody>
</table>
you really need to read html specification, font and center tags have several years obsolete, you need to use CSS instead
<!DOCTYPE html>
<html>
<head>
<title>ss</title>
<style>
body {font: "Arial, Helvetica, sans-serif"}
table { width: 90%; border-collapse: collapse; margin: 0 auto;}
td { border: 1px solid #000; }
td.center, th { text-align: center;}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th colspan="4">Header 3</th>
</tr>
</thead>
<!-- Table Content -->
<tbody>
<tr>
<td class="center">Cell 1</td>
<td class="center">Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</tbody>
</table>
</body>
</html>
Trying to build a table with sort icon next to each column name. (Using bootstrap and font awesome)
Please, refer to the code below
HTML
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
</tr>
</table>
CSS
th::after {
font-family: FontAwesome;
content: "\f0dc";
float: right;
text-align: right;
}
Why float and text-align not working here? Please let me know right CSS code to get it right. I also don't want that sort icon to wrapped up like normal text in smaller screens. It should be in fixed right place.
i think your mixing up the table tags
<table></table> table tag
<thead></thead> table header
<th></th> table column
<tbody></tbody> table body
<tr></tr> table row
<td></td> table cell
<tfoot></tfoot> table footer
but to answer your question with the way your current data is structured do it like this just add an empty table cell or column as the case maybe to your table row then use the css below to add what you want to the cell.
<!DOCTYPE html>
<html>
<head>
<title>extra table cell</title>
<style type="text/css">
tr th:last-child::after {
font-family: FontAwesome;
content: " i am what you want";
}
</style>
</head>
<body>
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
<th></th>
</tr>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
<th></th>
</tr>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
<th></th>
</tr>
</table>
</body>
</html>
I have used table for display the list of records. It have lot of rows and columns. If I print this table the table heading display in first page. After the first page the headings are not display. I found many website from Google search. I have followed that method, but I could not achieve. I could not realize the mistake. This is my css.
<style type="text/css" media="print" >
table td {
border-bottom:1px solid gray;
}
th {
font-family:Arial;
color:black;
background-color:lightgrey;
}
thead {
display:table-header-group;
}
tbody {
display:table-row-group;
}
</style>
This my Html code:
<table border="0" cellpadding="2" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>First Name 1</td>
<td>Last Name 1</td>
</tr>
</tbody>
</table>
Anyone can help me? Thanks.
Try adding this in your CSS :
#media print
{
thead {display: table-header-group;}
}
Here is the sample
First, you have to explicitly define the table head and table body:
<table>
<thead>
<tr>
<th>First Heading</th>
<th>Second Heading</th>
<th>Third Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
. . .
<tr>
<td>fim</td>
<td>fam</td>
<td>fom</td>
</tr>
</tbody>
</table>
If you want printing to work, you need to have an explicit declaration. Next, you just need a single line of CSS to get things going:
#media print {
thead {display: table-header-group;}
}
This will force most browsers to repeat the contents of thead node on every printed page.