Hướng dẫn tạo mục lục bằng CSS

Vài lời – Với MS Word, bạn có thể dễ dàng tạo một mục lục, tiếng Anh là table of contents, dễ dàng với công cụ có sẵn của Word, hoặc bạn có thể tự tạo bằng tay. Nhưng khi thiết kế web, nhất là với CSS, chúng ta phải làm thế nào?

Trước khi đi vào cách làm mục lục với CSS, ta hãy xem lại, Word giúp ta định dạng bảng mục lục như thế nào đã. Với công cụ tab của Word, ta có thể tạo ra hai dạng mục lục.

  • Thứ nhất là “Tiêu đề” (như tên chương, tên bài/mục nhỏ) nằm bên trái, số trang nằm bên phải. Và bạn phải cố gắng nhìn, trừng mắt ra mà nhìn, hoặc là dùng ta rà từ trái qua phải để xem chương/mục đó nằm ở trang nào.
  • Thứ hai là giữa tiêu đề và trang có một dòng bằng dấu chấm hoặc đường kẻ liên tục, và bạn cũng phải rà mắt theo đường kẻ đó để xem số trang.

Nay với CSS, bạn sẽ khó khăn để tạo được giống như Word. Nhưng cái khó ló cái khôn, ta lại có cách khác, theo mình, hay hơn cách truyền thống nhiều.

Cách 1 – Mục lục căn phải
[iframe src=’/demo/demo%20muc%20luc%20css.html’ height=’100px’]
Như bạn thấy ở trên, với các thẻ HTML và CSS, chúng ta có thể tạo một bảng mục lục đơn giản.

[html]
<table>
<tbody>
<tr>
<th>Introduction</th>
<td>7</td>
</tr>
<tr>
<th>Chapter <strong>1</strong> – The Sex of Centaurs</th>
<td>11</td>
</tr>
<tr>
<th>Chapter <strong>2</strong> – Poliphilo’s Dream</th>
<td>51</td>
</tr>
</tbody>
</table>
[/html]

Chúng ta tạo một table để chứa thông tin.


table { margin: 0 3em 0 auto; }
th { font-weight: normal; text-align: right; padding:0; }
td { font-style: italic; text-align: right; padding: 0 0 0 0.5em; }

Đoạn CSS trên giúp định dạng cho bảng mục lục của chúng ta. margin-left:auto sẽ giúp căn phần nội dung qua bên phải.

Cách 2 – Mục lục căn giữa – Kết hợp bullet

Theo cá nhân Cosmos, cách này có vẻ đẹp và hay hơn. Các bạn có thể có cảm nhận riêng. Cũng tùy trường hợp mà áp dụng cách nào để bảng mục lục nó hợp hoàn cảnh.

Các bạn xem ví dụ sau nhé. Với đoạn HTML và CSS sau…

[html]
<table>
<tbody>
<tr>
<th>Prologue</th>
<td>page 5</td>
</tr>
<tr>
<th>Points of Possible Agreement</th>
<td>page 9</td>
</tr>
<tr>
<th>Irreconcilable Differences</th>
<td>page 11</td>
</tr>
<tr>
<th>Conclusion</th>
<td>page 163</td>
</tr>
<tr>
<th>Index</th>
<td>page 164</td>
</tr>
</tbody>
</table>
[/html]


table {
  margin: 0 auto; }

th {
  font-weight: normal;
  text-align: right;
  padding: 0 0.5em 0 0; }

td:before {
  content: "2022";
  padding-right: 0.5em; }

td {
  font-style: italic;
  text-align: left;
  padding: 0; }

…và đây là kết quả.

[iframe src=’/demo/demo%20muc%20luc%20css%202.html’ height=’130px’]

margin:0 auto sẽ căn giữa bảng theo chiều ngang. Trong trường hợp này, ta cần khai báo width cho bảng để auto có hiệu lực. Tuy nhiên, width của bảng đã được kế thừa (inherit) nên ta có thể bỏ qua.

Dấu bullet phân cách tiêu đề và số trang được tạo bởi CSS, mã Unicode của nó là 2022. Tuy nhiên các trình duyệt IE 6, 7 (và cả IE 9) không hỗ trợ phần này. Do đó, ta cần thay thế bằng kí tự theo mã HTML là • vào thẻ HTML. (Bạn nên dùng Chrome để xem đầy đủ các chi tiết) -/-

Tham khảo: http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.10/

5 thoughts on “Hướng dẫn tạo mục lục bằng CSS

  1. ơ thế tức là vẫn phải biết code HTML , ngồi code thì mới ra được cái mục lục à ? có cách này hay hơn ko ta ? ^^, vd : dùng luôn cía thẻ li hoặc ol, thì trình soạn thảo có nút để bấm mà nhỉ ? thử css cái này xem nhé ^^

    • Còn cái “số trang” nữa mà, anh ^^
      Em thử rồi, nếu thì nó chỉ chịu đứng riêng một dòng. Nội dung trước và sau đều văng lên dòng trên hoặc dòng dưới.

      Có một cách khác khả quan hơn là dùng thẻ (Definition List), trong thẻ này có 2 thẻ con là (Definition Term) và (Describe an item in a Definition list). Nhược điểm của bạn này là thì nằm 1 dòng, nằm dòng dưới nó (chếch qua bên phải). Nhưng cách này thì có thể không động đến CSS.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s