Validator gives table errors - html

I have to make a table like
and I have this code so far:
table, td, tr {
border: 1px solid black;
}
td {
width: 50px;
height: 50px;
}
td[rowspan="2"] {
height: 100px;
}
td[colspan="2"] {
width: 100px;
}
<div>
<table>
<tr>
<td>a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td rowspan="2">c</td>
<td colspan="2" rowspan="2">
<table>
<tr>
<td colspan="2" rowspan="2">d</td>
</tr>
<tr></tr>
</table>
</td>
</tr>
<tr></tr>
</table>
</div>
The validator is giving me
and I don't know how to fix them.
I need no errors from the validator, as
it has to be acceptable by specification.

rowspans and colspans are only used if a cell should span 2 other cells horizontally or vertically, which isn't the case in your example. They are not there to define width or height.
So delete those and use classes instead to define the properties you want:
Apart from that, delete those empty tr elements you have in there - they make no sense without tds in them. ALso the nested table with only one cell in it is rather strange (you could just fill that cell with content), but maybe there's a reason for that which you didn't tell us.
table, td, tr {
border: 1px solid black;
}
td {
width: 50px;
height: 50px;
}
td.b {
height: 100px;
}
td.a {
width: 100px;
}
<div>
<table>
<tr>
<td>a</td>
<td class="a">b</td>
</tr>
<tr>
<td class="b">c</td>
<td class="a b" >
<table>
<tr>
<td class="a b">d</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

Related

How to create a full width HTML table with borders?

Current HTML:
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Desired:
Question:
How can I add borders and width to my current HTML with CSS as the desired outcome?
What I have tried
I have tried the following css:
table {
border: 1px solid black;
}
This just puts a border around the table. How can I add it same as desired too?
table {
border-collapse: collapse;
/* if you don't add this line you will see "double" borders */
border: 1px solid black;
width: 100vw;
}
th{
color: white;
background-color: blue;
}
td{
background-color: white;
width: 70%;
}
td, th {
border: 1px solid black;
}
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Heres, your snippet!
simply this:
table {
border-collapse: collapse; /* if you don't add this line you will see "double" borders */
border: 1px solid black;
}
table th,
table td {
text-align: left;
border: 1px solid black;
}
demo here https://jsfiddle.net/3hpks1mL/
hope it help you
section {
width:100wh;
}
table{
width:100%
}
<section class="Product-Info">
<table border="1">
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<td>Product Name:</td>
<td >Name</td>
</tr>
<tr>
<td > Product Description:</td>
<td >Description</td>
</tr>
</table>
</section>
Fairly easy, in your example you just have to apply the desired background colour to the table header cells (th), like so:
th {
background: darkblue;
color: white; /* Assuming you don't want black text on dark blue. */
}
For the standard border around the table cells to disappear you have to simply collapse the border on the main table element, like so:
table {
border-collapse: collapse;
}
With that set you can now apply any border styling you want to your table, in any thickness, colour and style you want.
I'd go with the following:
table, th, td {
border: 1px solid black;
}
.Product-Info > table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
}
.Product-Info tr > *:first-child {
background: blue;
color: white;
text-align: left;
}
.w-25 {
width: 25% !important;
max-width: 25% !important;
}
.text-center {
text-align: center !important;
}
<section class="Product-Info">
<table>
<colgroup>
<col class="w-25 blue">
<col class="">
</colgroup>
<tr>
<th colspan="2" class="text-center">Product Infromation</th>
</tr>
<tr>
<th class="text-left">Product Name:</th>
<td class="text-center">Name</td>
</tr>
<tr>
<th class="text-left">Product Description:</th>
<td class="text-center">Description</td>
</tr>
</table>
</section>
Extra information (The "copy-paste" snippet under #Random-COSMOS answer).
Table is block-level element
"A block-level element always starts on a new line and takes up the
full width available. https://www.w3schools.com/html/html_blocks.asp"
Set any width you want to the table (400px or 30%) ==> 100% in your case (100% of its parent).
<table style="width: 100%;">
To specify table borders in CSS, use the border property.
table, th, td {
border: 1px solid black;
}
Out of topic - Accessible tables
For Web Accessibility => Add relationship between header and data cells (scope="row" / scope="col").
Full article: https://www.w3.org/WAI/tutorials/tables/two-headers/
<table>
<tr>
<th scope="col" colspan="2">Product Infromation</th>
</tr>
<tr>
<th scope="row">Product Name:</th>
<td>Some Name</td>
</tr>
<tr>
<th scope="row">Product Description:</th>
<td>Some Description</td>
</tr>
</table>

HTML table with mixed rowspan

I'm trying to use HTML to construct a table with three rows (1-3) and three columns (A-C) forming nine "virtual cells" (A1, B1, C1, A2, B2, C2, A3, B3, C3) and apply row spanning so that:
cell A1 span all three rows (covering A2 and A3)
cell C1 span two rows (covering C2)
cell B2 span two rows (covering B3)
This is what I want to see:
This is the HTML I thought would give me that:
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr><td rowspan="3">A1</td><td>B1</td><td rowspan="2">C1</td></tr>
<tr><td rowspan="2">B2</td></tr>
<tr><td>C3</td></tr>
</table>
</body>
</html>
But that gives me:
What is the correct way to get what I want? Or is it not possible?
This is for use in technical documentation. It is not a layout issue, the content is semantically a table.
In order to prevent the rows collapsing without the need for additional markup, you can attach a phantom cell to each row with tr::after set to display: table-cell with your cell padding on top and bottom and a unicode blank space:
tr::after {
content: '\00a0';
display: table-cell;
padding: 1em 0;
}
Gives you the correct result:
It's worth noting that the phantom cell will create a slight gap to the right like this:
Full snippet
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 1em;
vertical-align: top;
}
tr:after {
content: '\00a0';
display: table-cell;
padding: 1em 0;
}
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
Here's a solution without having to know the table height up front, using hidden table cells, like in Align table using rowspan and colspan (as I said, it's basically a duplicate, just another layout):
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
td.hidden { visibility: hidden; padding: 1em 0; border: 0 none; }
</style>
</head>
<body>
<table>
<tr><td rowspan="3">A1</td><td>B1</td><td rowspan="2">C1</td><td class="hidden">‌</td></tr>
<tr><td rowspan="2">B2</td><td class="hidden">‌</td></tr>
<tr><td>C3</td><td class="hidden">‌</td></tr>
</table>
</body>
</html>
Why not just setting a height to the tr cause it is a table the height will adjust anyways if there is more content inside the row.
something like so:
table {
border-collapse: collapse;
}
tr {
height: 30px;
}
td {
border: 1px solid black;
padding: 1em;
vertical-align: top;
}
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
Otherwise,
<!DOCTYPE html>
<html>
<head>
<style>
table { border-collapse: collapse; }
td{border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td rowspan="2">C3</td>
</tr>
</table>
</body>
</html>
You could hack it like this:
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr>
<td style="width:0px;padding:0;border:0"></td>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td style="width:0px;padding:0;border:0;height:50px"></td>
<td rowspan="2">B2</td>
</tr>
<tr>
<td style="width:0px;padding:0;border:0"></td>
<td>C3</td>
</tr>
</table>
</body>
</html>
... but I would recommend to use another structure instead of tables, since it doesn't have a lot in common with table, besides the columns.
It's depend the height of your table.
http://codepen.io/anon/pen/jBOgpx
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2" style="height:65px">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>

Vertical alignment and distribution of rows in table

The second column spans 2 rows. I want the first column NOT to be divided by 50% for each row. Row2 should start right under the content of Row1.
<table border="1" style="width:850px">
<tr>
<td style="width: 50%; vertical-align: top;">1.Row Cell 1</td>
<td rowspan="2" style="height:800px">1-2 Row Cell 2</td>
</tr>
<tr style="vertical-align:top">
<td style="vertical-align:top">2.Row Cell 1</td>
</tr>
</table>
OK, seems that this is related to Internet Explorer 11, but there must be a way to accomplish this!?
So there is your solution in the snippet below :
table , td, th {
border: 1px solid #595959;
border-collapse: collapse;
}
td, th {
padding: 3px;
width: 250px;
height: 150px;
}
th {
background: #f0e6cc;
}
.even {
background: #fbf8f0;
}
.odd {
background: #fefcf9;
}
<table>
<tbody>
<tr>
<td style="height:1em">This is a test thank you for your attention</td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
Hope it help.
Adding a height: 1em; seemed to work - like this for the first cell:
<td style="width: 50%; vertical-align: top; height: 1em;">

Rowspan cell not the same size

I have a simple table with rowspan . I need to that cell number1, cell number2 and cell number6 to be the same size .
How can I achieve that please
<table>
<tr>
<td>number1</td>
<td>number3</td>
</tr>
<tr>
<td rowspan="2">number2</td>
<td>number4</td>
</tr>
<tr>
<td>number5</td>
</tr>
<tr>
<td>number6</td>
<td>number7</td>
</tr>
</table>
Like this you mean?
This solution uses the existing markup, no need for any "empty" rows.
table {
border-collapse: collapse;
}
td {
border: 1px solid #ddd;
padding: 10px;
}
tr:nth-child(1) td:first-child,
tr:nth-child(2) td:first-child,
tr:nth-child(4) td:first-child {
height: 60px;
}
<table>
<tr>
<td>number1</td>
<td>number3</td>
</tr>
<tr>
<td rowspan="2">number2</td>
<td>number4</td>
</tr>
<tr>
<td>number5</td>
</tr>
<tr>
<td>number6</td>
<td>number7</td>
</tr>
</table>
The trick is to add a single cell row under each row that has a rowspan. So basically, you need to accommodate room for any span in a table, otherwise you'll get extra cells protruding from the table. Easiest way to remember is to:
Make one less cell for every unit of the (rowspan -1) on each proceeding row.
Make one less cell for every unit of the (colspan -1) on each proceeding column.
table {
width: 105px;
table-layout: fixed;
}
td {
width: 50px;
text-align: center;
}
tr {
height: 50px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Col1, 2, & 6</title>
<style>
table {
1px solid grey
}
td {
border: 1px solid black
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">2</td>
</tr>
<tr></tr>
<tr>
<td rowspan="2">3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td rowspan="2">6</td>
<td rowspan="2">7</td>
</tr>
<tr></tr>
</table>
</body>
</html>

Fixed width on second td in editable table

I want to have a fixed width for my editable table, but I also wanting to set different width for each TD.
In my attempt I am able to get the table set at a fixed width, but this causes the width of the TDs appear to be 50% instead of the 80% - 20% I had before setting the fixed width
CSS
table {
margin: 15px 0;
border: 1px solid black;
table-layout: fixed;
width: 100%;
}
.fixed td:nth-of-type(1) {width:20%;}
.fixed td:nth-of-type(2) {width:80%; text-align: left;}
.fixed {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
.fixed td {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
HTML
<div class="fixed" contenteditable="true">
<table>
<tbody>
<tr>
<td colspan="2">Header:</td>
</tr>
<tr>
<td>Name:</td>
<td><br/></td>
</tr>
<tr>
<td>DOB::</td>
<td><br/></td>
</tr>
<tr>
<td>Comments:</td>
<td><br/></td>
</tr>
</table>
What am I missing? Check this Fiddle if it will help. Try it out by typing enough to see it automatically goes to the next line after a certain point.
The problem with your code is that your first <tr> is having colspan="2". So when you give a width:100% to all the TDs of the table, the css won't get applied to the underlying TDs as you want.
Your solution is to separate the Header td: <td colspan="2">Header:</td> into a separate table (Refer HTML-1 below)
or
put the underlying TDs in the same TR as that of the header (Refer HTML-2 below).
Also change the CSS and simplify it like I did below. you have written a lot of unnecessary CSS.
Working Fiddle Here
Here's what I tried. try this:
HTML-1:
<table class="fixed" >
<tbody>
<tr>
<td colspan="2">Header:</td>
</tr>
</tbody>
</table>
<table class="fixed" >
<tbody>
<tr>
<td>Name:</td>
<td>test</td>
</tr>
<tr>
<td>DOB::</td>
<td>tes</td>
</tr>
<tr>
<td>Comments:</td>
<td>test</td>
</tr>
</table>
HTML-2:
<table class="fixed" >
<tbody>
<tr>
<td colspan="2">Header:</td>
<tr>
<td>Name:</td>
<td>test</td>
</tr>
<tr>
<td>DOB::</td>
<td>tes</td>
</tr>
<tr>
<td>Comments:</td>
<td>test</td>
</tr>
</tr>
</tbody>
</table>
Simplified CSS:
table {
margin: 0 0;
width: 100%;
table-layout: fixed;
}
.fixed td:nth-of-type(1) {width:80%;}
.fixed td:nth-of-type(2) {width:20%; text-align: left;}
.fixed td {
margin:0px;padding:0px;
border:1px solid #000; }
You have Errors in your html syntax although that is nothing to do with the problem.
See if you need something like this fiddle.
table {
margin: 15px 0;
border: 1px solid black;
width: 100%;
}
.fixed td:nth-of-type(1) {width:20%;}
.fixed td:nth-of-type(2) {width:80%; text-align: left;}
.fixed {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
.fixed td {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
<div class="fixed" contenteditable="true">
<table>
<tbody>
<tr>
<td colspan="2">Header:</td>
</tr>
<tr>
<td>Name:</td>
<td><br/></td>
</tr>
<tr>
<td>DOB::</td>
<td><br/></td>
</tr>
<tr>
<td>Comments:</td>
<td><br/></td>
</tr>
</tbody>
</table></div>
otherwise you wont be able to achieve variable td width as all the td will have same width in a column.
you can use colspan attribute for a workaround.