PS. I prefer to solve this problem with CSS if possible but if there is no way, I also have access to JQuery (but no other library).
OK, this is an extension of my previous question. When I was asking that question, I tried to make the scenario as simple as possible. But it seems the colspans in my table are creating a problem. I have a table with 8 columns. At runtime, any number of these elements are removed. There are a few rows with colspan="8" in my table. Using table-layout:fixed; I make the cells have equal width. The problem is the cell with colspan="8" doesn't resize. This picture shows what I have and what I want:
And here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
width:600px;
table-layout:fixed;
}
table td{
border:1px solid red;
text-align:center;
background-color:#9CF;
}
table td:only-child{
background-color:#CCFFFF;
}
caption{
color:blue;
font-size:80%;
}
</style>
<title></title>
</head>
<body>
<table>
<caption>Original table</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<tr>
</table>
<table>
<caption>After some columns are removed</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>7</td>
<td>8</td>
<tr>
</table>
<table>
<caption>I want these to have the same width</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>Two</td>
<td>Three</td>
<td>Column number four</td>
<td>5</td>
<tr>
</table>
<table>
<caption>I want these to have the same width, too</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>Column number four</td>
<td>5</td>
<tr>
</table>
</body>
</html>
EDIT 1: Didn't read the previous linked question.
EDIT 2: I fixed it, it should be working okay now.
I tried to tweak it a bit and I think I got the desired outcome. Now you need to customize the td size.
Jsfiddle
Related
I have attached this photo to show you what the question is asking with correct formatting.
Click here to see my output with the code used below.
<h1>7.
<table>
<tr>
<th colspan="3">1</th>
</tr>
<tr>
<td rowspan="2">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
</h1>
I used the rowspan and colspan as instructed, and yet my table is still missing the larger spaces as the example shows is needed, so I am looking for guidance on what I am missing. The numbers are aligned correctly, just missing the spaces. I know the code should seem fine, but the program checker is saying it's wrong.
<!DOCTYPE html>
<html>
<head>
<style>
table.td {
bold: normal;
}
</style>
</head>
<body>
<h1>7</h1>
<table style="text-align:center;">
<tr >
<th colspan="3"><h1>1</h1></th>
</tr>
<tr>
<td rowspan="2"><h1>2</h1></td>
<td><h1>3</h1></td>
<td><h1>4</h1></td>
</tr>
<tr>
<td><h1>5</h1></td>
<td><h1>6</h1></td>
</tr>
</table>
</body>
</html>
I am trying to center just certain columns in a table but I am having issues. I know in the past you would just simply apply inline styles to each TD but there has to be a better way.
Here is a simple example:
.centerText{
text-align:center;
}
<table border="1">
<col>
<col class="centerText">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
With that class I am trying to center the text inside. I know applying css to the col will work for changing background color for the column and text color and such, but I am not sure how I would use it to center a column. I am assuming because I need to center the contents of the td and this is probably just centering the TD element itself; which is already 100 percent.
I understand I can just say apply the css to the 5th TD in this TR but that seems fragile.
Also, bonus points if you can show me how to change the width of a column this way. I used the width attribute for col but that is deprecated in html 5 (even though it is still currently supported.
Done, your class wasn't used anywhere
tr td:nth-child(2) {
text-align:center;
}
<table border="1">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td >2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
I removed:
<col>
<col class="centerText">
and
.centerText{
text-align:center;
}
Because col doesn't mean anything and you didn't close the tags.
CSS
table {
border-collapse: collapse;
width: 100%;
}
td {
text-align: center
}
If you want to align your all td content to the center
add the centerText class to your table
<table class="centerText" border="1">
It's not completely clear what you want, but if you want to center the contents of a certain column, you can just use this CSS rule:
td:nth-child(2) {
text-align:center;
}
In this example it applies to the second column, but you could define that for any column. It works since the td are always children of a tr, so you can use the nth-child selector.
td:nth-child(2) {
text-align: center;
}
<table border="1">
<col>
<col class="centerText">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
I am HTML/CSS beginner attempting to create calendar view very similar to Microsoft Outlook's design as shown below:
So far, I gotten the basic outline of the calendar with the following HTML/CSS:
<html>
<head>
<title>August, 2016</title>
</head>
<body>
<center><h1>August, 2016</h1></center>
<style>
table{
table-layout: fixed;
}
</style>
<table border="1" width="1250" height="800">
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thur</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>1</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
Claim Benefits<br>
Pick up groceries<br>
Iron the shirts<br>
+5 more...
</td>
</tr>
</table>
</td>
<td>2</td>
</tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tr>
<td>3</td>
<td>4</td>
<td>
<table>
<tr>
<td>5</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
Claim Benefits<br>
Pick up groceries<br>
Iron the shirts<br>
+5 more...
</td>
</tr>
</table>
</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
Which produces:
I want to accomplish some of the same things Outlook does:
The day of the month number should be on the top left corner of the cell. I attempted to create this with a table inside the cell but it doesn't quite feel or look right. I am directly attempting to recreate Outlook's view and the way they setup the day number and reminders below it.
Each of the cells should maintain the same size while containing up to 4 hyperlinks. In the above code, the cells of the row containing hyperlinks become bigger than the cells of the other rows. I want to fix the cell size such that all cells are the same size whether they contain up to 4 hyperlinks or not.
Thanks for any helpful code or suggestions.
An easy way to position/style the calendar numbers separately from the content is to make them td pseudo-elements. You could set the content to something like attr(data-day) to have it dynamically display a number set in the HTML.
To make sure the cells have the same height, just specify a height in the CSS. Since you only want "up to 4 hyperlinks", you can just check what the height is for a cell with 4 links and then use that.
By the way, it looks like there are a lot of errors with the tr tags in your code, and I would recommend representing the listed elements inside an individual day as a list rather than as nested tables (the calendar is tabular data, but the contents of the day are a to-do list).
Here's a snippet that includes the recommended changes:
table {
table-layout: fixed;
width: 1250px;
height: 800px;
}
table td {
height: 100px;
position: relative;
}
table td:before {
content: attr(data-day);
display: block;
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<center>
<h1>August, 2016</h1>
</center>
<table border="1">
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thur</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td data-day="1">
<ul>
<li>Claim Benefits</li>
<li>Pick up groceries</li>
<li>Iron the shirts</li>
<li>+5 more...</li>
</ul>
</td>
<td data-day="2"></td>
</tr>
<tr>
<td data-day="3"></td>
<td data-day="4"></td>
<td data-day="5"></td>
<td data-day="6"></td>
<td data-day="7"></td>
<td data-day="8"></td>
<td data-day="9"></td>
</tr>
<tr>
<td data-day="10"></td>
<td data-day="11"></td>
<td data-day="12">
<ul>
<li>Claim Benefits</li>
<li>Pick up groceries</li>
<li>Iron the shirts</li>
<li>+5 more...</li>
</ul>
</td>
<td data-day="13"></td>
<td data-day="14"></td>
<td data-day="15"></td>
<td data-day="16"></td>
</tr>
<tr>
<td data-day="17"></td>
<td data-day="18"></td>
<td data-day="19"></td>
<td data-day="20"></td>
<td data-day="21"></td>
<td data-day="22"></td>
<td data-day="23"></td>
</tr>
<tr>
<td data-day="24"></td>
<td data-day="25"></td>
<td data-day="26"></td>
<td data-day="27"></td>
<td data-day="28"></td>
<td data-day="29"></td>
<td data-day="30"></td>
</tr>
<tr>
<td data-day="31"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I think You can add a flot:left; style to this month number, and maybe margin,padding:0;
I suggest to use min-height with the same value as height of all cells
First, you have not added any styling so you are leaving that up to the browser's defaults. Also, the center tag is deprecated. Use this instead:
h1 {text-align:center;}
For the table, you can add this to make the border appear like Outlooks' borders:
table, th, td {border-collapse: collapse;}
To style the table data remove the padding and margin. That should move the first td in the first tr to the top left corner.
Lastly, add a specific height to the row of each week. I would assign that tr a class of week and style with whatever height you want:
tr.week {height:200px;}
I have a single table in desktop. Client wants its to be shown as 2 tables in mobile view. Is there a way to achieve it without duplication of html or should I take div method instead of table?
Desktop view:
Mobile view:
you can use 2 table together like this
pic
code
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
.tb_1{
float:left;
width:50%;
}
.tb_2{
float:Right;
width:50%;
}
#media only screen and (max-width: 619px) {
.tb_1{width:100%;}
.tb_2{width:100%;}
}
</style>
</head>
<body>
<table class="tb_1" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
<table class="tb_2" border="1">
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr
</table>
</body>
</html>
I'm currently learning HTML. I was trying to create a simple HTML document that displays a simple table, but I'm having troubles. My web browser (Mozilla Firefox) is not displaying the borders for the whole table. It looks like if it was a regular paragraph.
Here is what I have
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html>
<head>
<title>My first web page</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<tr/>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</body>
</html>
Try adding a border attribute to the <table> tag, like this:
<table border="1">
Edit: If you have seen tables with borders, but without the border attribute set, it's probably because they were styled with css, which is the preferred way to style everything in html (not by adding individual attributes as above):
<head>
<title>My first web page</title>
<style type="text/css">
table {border: 1px solid black;}
td {border: 1px solid black;}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
...
</body>
As another learning exercise, you should also look into linking to an external style sheet, as an alternative to using a <style> tag in the html as shown here. Here is a decent beginning tutorial: http://www.w3schools.com/css/css_howto.asp
You might want to control border by using something like :
<table style="border:2px solid red;">
You're missing a closing element for second row. Should be:
<head>
<title>My first web page</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<tr/>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</body>