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;}
Related
I've created a simple table using html and a bit of bootstrap, but the last rowspan doesn't work as I thought it will, here's code:
I wanted 4 red-marked cells to be one, so I've replaced first <td>group1</td> with <td rowspan="4">group1</td> and removed remaining 3 <td>group1</td> but it has messed up whole table.
Also it is placed it <div class="col-lg-7 mb-4"> div, but I've also tried without any div - the effect was the same. I'm not sure what is causing that problem, considering that the rest rowspans is working just fine.
/* I don't think CSS is needed, but just in case: */
table.table-bordered {
border: 1px solid #2f8dff!important;
box-shadow: 0px 0px 100px 0px #2f8dff;
margin-top: 20px;
text-transform: uppercase;
font-size: 12px;
color: white;
}
table.table-bordered>thead>tr>th {
border: 1px solid #2f8dff!important;
}
table.table-bordered>tbody>tr>td {
border: 1px solid #2f8dff!important;
}
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">17:00-18:00</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td rowspan="2">18:00-19:00</td>
<td>1</td>
<td rowspan="2">group3</td>
<td>3</td>
<td>4</td>
<td rowspan="2">group3</td>
</tr>
<tr>
<td rowspan="2">group2</td>
<td>8</td>
<td rowspan="2">group2</td>
</tr>
<tr>
<td rowspan="2">19:00-20:00</td>
<td rowspan="4">group1</td>
<td rowspan="2">group1</td>
<td>group1</td>
</tr>
<tr>
<td rowspan="3">group1</td>
<td rowspan="3">group1</td>
<td>group1</td>
</tr>
<tr>
<td rowspan="2">20:00-21:00</td>
<td>3</td>
<td>group1</td>
</tr>
<tr>
<td>7</td>
<td>group1</td>
</tr>
</tbody>
</table>
What shall I do?
Thanks in advance!
I don't really know what you mean by "messed up whole table". After adding the row-span="4" and removing the three following td tags, the table looked just fine for me:
The only thing I can see is the changing height of that table cell. This can be prevented by adding this CSS:
tr {
height: 1rem;
}
It makes every row equal height and produces following result:
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'm using Bootstrap 3 and I want to remove border of cell:
<td colspan="4"></td>
This is the current table:
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>N°</th>
<th>Fecha salida</th>
<th>Fecha regreso</th>
<th>Ciudad</th>
<th>País</th>
<th>Días</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>1</td>
<td>03/02/2015</td>
<td>05/02/2015</td>
<td>Ciudad de Panamá</td>
<td>Panamá</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>05/12/2014</td>
<td>05/12/2014</td>
<td>New York</td>
<td>EE.UU</td>
<td>1</td>
</tr>
<tr class="bold">
<td colspan="4"></td>
<td align="right">Días fuera</td>
<td>4</td>
</tr>
</tbody>
</table>
Current View:
Desired View:
One way to do it is to set the border-bottom css property to hidden for <td colspan="4"></td>.
<td colspan="4" style="border-bottom: hidden;"></td>.
...or include the css in your 'bootstrap overriding stylesheet' (if you have one).
Fiddle
Use this CSS
#hiddenborder{
border-bottom: hidden;
border-left: hidden;
}
I have a HTML table correctly formatted the way I want it using the colspan element. What I also want however is for the elements that occupy multiple columns to have some kind of border or division at the column boundaries (within the spanned element). The purpose for this is to make it easy for the user to see how many columns a spanned element occupies.
For example if an element in a table occupies one row and 4 columns there could be three divisions within the element.
Thanks.
<div id="debug_con">
<h2>Debug Modes</h2>
<table class="debug">
<tr>
<th>Group Name</th>
<th>Width</th>
<th>Type</th>
<th>Group Address (dec)</th>
<th>Group Address (in HEX)</th>
<th>GPIO7</th>
<th>GPIO6</th>
<th>GPIO5</th>
<th>GPIO4</th>
<th>GPIO3</th>
<th>GPIO2</th>
<th>GPIO1</th>
<th>GPIO0</th>
</tr>
<tr class="W">
<td>debug_1</td>
<td>8</td>
<td>output</td>
<td>0</td>
<td>0x0</td>
<td class="col1" colspan="8">demod_out</td>
</tr>
<tr class="W">
<td>debug_2</td>
<td>8</td>
<td>output</td>
<td>1</td>
<td>0x1</td>
<td class="col1" colspan="8">afc_out</td>
</tr>
<tr class="R">
<td>debug_combo</td>
<td>8</td>
<td>input</td>
<td>2</td>
<td>0x2</td>
<td class="col1" colspan="4">this_upper</td>
<td class="col2" colspan="4">this_lower</td>
</tr>
<tr class="R">
<td>n_word</td>
<td>8</td>
<td>input</td>
<td>3</td>
<td>0x3</td>
<td class="col1" colspan="8">n_word</td>
</tr>
<tr class="W">
<td>write_combo</td>
<td>8</td>
<td>output</td>
<td>5</td>
<td>0x5</td>
<td class="unallocated" colspan="5">unallocated</td>
<td class="col1" colspan="1">Bit_2</td>
<td class="col2" colspan="1">Bit_1</td>
<td class="col1" colspan="1">Bit_0</td>
</tr>
<tr class="W">
<td>spi_debug</td>
<td>8</td>
<td>output</td>
<td>6</td>
<td>0x6</td>
<td class="unallocated" colspan="6">unallocated</td>
<td class="col1" colspan="1">spi_error</td>
<td class="col2" colspan="1">spi_flag</td>
</tr>
<tr class="W">
<td>OCL_GRP1</td>
<td>8</td>
<td>output</td>
<td>8</td>
<td>0x8</td>
<td class="unallocated" colspan="6">unallocated</td>
<td class="col1" colspan="1">ocl_dig_static_cal_meas_output_q</td>
<td class="col2" colspan="1">ocl_dig_static_cal_meas_output_i</td>
</tr>
<tr class="W">
<td>OCL_GRP2</td>
<td>8</td>
<td>output</td>
<td>9</td>
<td>0x9</td>
<td class="unallocated" colspan="1">unallocated</td>
<td class="col1" colspan="6">dig_ocl_controller_output_mag_i</td>
<td class="col2" colspan="1">dig_ocl_controller_output_sign_i</td>
</tr>
<tr class="W">
<td>OCL_GRP3</td>
<td>8</td>
<td>output</td>
<td>10</td>
<td>0xa</td>
<td class="unallocated" colspan="1">unallocated</td>
<td class="col1" colspan="6">dig_ocl_controller_output_mag_q</td>
<td class="col2" colspan="1">dig_ocl_controller_output_sign_q</td>
</tr>
<tr class="W">
<td>OCL_GRP4</td>
<td>8</td>
<td>output</td>
<td>11</td>
<td>0xb</td>
<td class="col1" colspan="3">oscl_sar_core_state_q</td>
<td class="col2" colspan="3">oscl_sar_core_state_i</td>
<td class="col1" colspan="1">ocl_static_cal_pga_calibration_ready_q</td>
<td class="col2" colspan="1">ocl_static_cal_pga_calibration_ready_i</td>
</tr>
<tr class="W">
<td>OCL_GRP5</td>
<td>8</td>
<td>output</td>
<td>12</td>
<td>0xc</td>
<td class="unallocated" colspan="2">unallocated</td>
<td class="col1" colspan="6">fsm_idac_input_code_i</td>
</tr>
<tr class="W">
<td>OCL_GRP6</td>
<td>8</td>
<td>output</td>
<td>13</td>
<td>0xd</td>
<td class="unallocated" colspan="2">unallocated</td>
<td class="col1" colspan="6">fsm_idac_input_code_q</td>
</tr>
.....etc.....
I am learning alot today jsfiddle is great! Ok I have a jsfiddle (thanks for the suggestion Alex) which shows how the table is currently being rendered. If you can see fsm_idac_input_code_i within the table for example, it is not obvious how many columns (GPIOs) the element occupies. If there were still some column borders within the element then the user could clearly see this without having to look at the color changes of adjacent cells or having to refer to the table header.
Very quick example - just to give an idea of what I meant.
Something like this, then you can style your divs as you wish - not sure is that what you need tho
<td class="col1" colspan="1">
<div>
spi_error
</div>
<div>
spi_error2
</div>
</td>
You can accomplish this without changing your existing layout.
This gives a red border to all cells that have a colspan greater than 1:
td[colspan] {
border: 2px solid red;
}
td, td[colspan="1"] {
border: 1px solid gray;
}
Fiddle 1
You could even show the colspan value when hovering over a cell:
td::before {
content: "1:";
position: absolute;
display: none;
left: 0;
top: 0em;
padding: 0.2em;
color: red;
}
td[colspan="2"]::before {content: "2:";}
td[colspan="3"]::before {content: "3:";}
td[colspan="4"]::before {content: "4:";}
td[colspan="5"]::before {content: "5:";}
td[colspan="6"]::before {content: "6:";}
td[colspan="7"]::before {content: "7:";}
td[colspan="8"]::before {content: "8:";}
td:hover {
padding-left: 1.5em;
}
td:hover::before {
display: block;
}
Fiddle 2
I'm trying to help my son with a HTML project. This is to be only HTML, not CSS. He has to build a table with his school class schedule. I can't seem to get the columns to line up.
<!DOCTYPE html>
<html>
<body>
<center> Howie </center>
<p><table border="0"
cellpadding=0>
</tr>
<tr>
<th>Period</th>
<th>Class</th>
<th>Teacher</th>
</tr>
<tr>
<td>1</td>
<td>Band </td>
<td>Sletten</td>
</tr>
<tr>
<td>2</td>
<td> Intro to IT</td>
<td>Rogers</td> </tr>
</tr>
<tr>
<td>3</td>
<td>Biology</td>
<td>Braet</td>
</tr>
<tr>
<td>4</td>
<td>Study Hall</td>
<td>Mendoza</td>
</tr>
<tr>
<td>5</td>
<td>English II</td>
<td>Johnson</td>
</tr>
<tr>
<td>6</td>
<td>US History</td>
<td>Peterson</td>
</tr>
<tr>
<td>7</td>
<td>Advanced Algebra </td>
<td>Connon</td>
</tr>
<tr>
<td>8</td>
<td>Spanish II </td>
<td>Michel</td>
</table></p>
Any suggestions? Any help would be appreciated.
Thanks,
Al
Im sorry... But please look at the code first.
You are beginning with a </tr> That means you want to close a <tr>
And at the end you dont close the <tr>
Second point, why a table inside of a <p> ?
I think if you fix those minor faults.. it will be fine.
Succes with helping your son
Your HTML is malformed. Among other issues:
There is a stray closing </tr> tag just inside <table> tag which needs to be removed.
After the <td></td> containing "Rogers" is an extra </tr> which needs to be removed.
You are missing a </tr> at the end of the table before the </table> tag.
Your HTML is missing the closing </body> and </html> tags.
You should use an HTML validator, such as this one. This will help you discover these types of issues in the future.
They seem messed up because default h alignment for <th> is center and for <td> is left. If you switch th with td you should be fine.
I also agree with the other answers that you have some html issues. I recommend you write html using a specialized editor.
your open and close tags were somewhat messy.
plus I added some html alignment for the head row.
Next time use a text highlighting editor, it makes life a whole lot easier to find the issues:
jsFiddle Example
<p><table border="0" cellpadding="6" cellspacing="0">
<tr>
<th align="left">Period</th>
<th align="left">Class</th>
<th align="left">Teacher</th>
</tr>
<tr>
<td>1</td>
<td>Band </td>
<td>Sletten</td>
</tr>
<tr>
<td>2</td>
<td> Intro to IT</td>
<td>Rogers</td>
</tr>
<tr>
<td>3</td>
<td>Biology</td>
<td>Braet</td>
</tr>
<tr>
<td>4</td>
<td>Study Hall</td>
<td>Mendoza</td>
</tr>
<tr>
<td>5</td>
<td>English II</td>
<td>Johnson</td>
</tr>
<tr>
<td>6</td>
<td>US History</td>
<td>Peterson</td>
</tr>
<tr>
<td>7</td>
<td>Advanced Algebra </td>
<td>Connon</td>
</tr>
<tr>
<td>8</td>
<td>Spanish II </td>
<td>Michel</td>
</tr>
</table></p>